Sign in box

This is a sign in box

by Etienne Bibaud

HTML

<div class="signInBoxContainer">
	<form class="signInBox" action="signin.php" method="post">
		<div class="titleSignBox">Sign In</div>
		<br>
		<div class="inputContainer">
			<input type="email" name="emailSignIn" id="emailAddr" class="signinInput" value="" maxlength="75" tabindex="1" required>
			<label for="emailSignIn" class="signinPlaceholderCont">
				<span class="signinPlaceholder">Email</span>
			</label>
		</div>
		<span>Please use this format: min. 8 letters, lowercase or uppercase & a number</span>
		<div class="inputContainer">
			<input type="password" name="passwordSignIn" id="password" class="signinInput" value="" maxlength="75" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,75}$" tabindex="2" required>
			<label for="passwordSignIn" class="signinPlaceholderCont">
				<span class="signinPlaceholder">Password</span>
			</label>
		</div>
	</form>
</div>

CSS

.signInBox {
  position: relative;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
  text-align: center;
  border: 2px solid black;
  border-radius: 5px;
  background-color: #ebebeb;
  padding: 20px;
}

.inputContainer {
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  padding-top: 1.5rem;
  width: 40%;
  margin: auto;
}

.titleSignBox {
  font-size: 1rem;
  font-weight: bold;
}

.signinPlaceholderCont {
  pointer-events: none;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.signinPlaceholderCont::after {
  content: "";
  position: absolute;
  /* left: 0px; */
  left: 50%;
  bottom: -1px;
  height: 100%;
  width: 100%;
  border-bottom: 3px solid #17d44a;
  transform: translateX(-150%);
  transition: transform 0.3 ease;
  -moz-transition: transform 0.3s ease;
  /* Firefox 4 */
  -webkit-transition: transform 0.3s ease;
  /* Safari and Chrome */
  -o-transition: transform 0.3s ease;
  /* Opera */
  -ms-transition: transform 0.3s ease;
  /* Explorer 10 */
}
.signinPlaceholder{
	display: block;
	color: rgba(0, 0, 0, 0.7);
	font-weight: 600;
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.3s ease;
}
.signinInput:focus + .signinPlaceholderCont .signinPlaceholder{
	transform: translate(-50%, -100%);
	background: linear-gradient(90deg, rgba(0,134,255,1) 0%, rgba(0,212,255,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.movePlaceholderUp{
	transform: translate(-50%, -100%);
	background: linear-gradient(90deg, rgba(0,134,255,1) 0%, rgba(0,212,255,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.signinInput:valid{
	color: green;
}
.signinInput:valid + .signinPlaceholderCont::after{
	transform: translateX(-50%);
}
.signinInput{
	outline: none;
	background-color: transparent;
	border:...

JavaScript

function adjustStyling(zEvent) {
  var inpVal = zEvent.target.value;
  if (zEvent.type == "focus" && zEvent.target.name == "password") {
    $("#pwInfo").show();
  }
  console.log(zEvent);
  switch (zEvent.target.id) {
    case "emailAddr":
      if (inpVal == "") {
        document.getElementsByClassName("signinPlaceholder")[0].classList.remove("movePlaceholderUp");
      } else {
        document.getElementsByClassName("signinPlaceholder")[0].classList.add("movePlaceholderUp");
      }
      break;
    case "password":
      if (inpVal == "") {
        document.getElementsByClassName("signinPlaceholder")[1].classList.remove("movePlaceholderUp");
      } else {
        document.getElementsByClassName("signinPlaceholder")[1].classList.add("movePlaceholderUp");
      }
      break;
  }
}
var inpsToMonitor = document.getElementById("emailAddr");
inpsToMonitor.addEventListener("change", adjustStyling, false);
inpsToMonitor.addEventListener("keyup", adjustStyling, false);
inpsToMonitor.addEventListener("focus", adjustStyling, false);
inpsToMonitor.addEventListener("blur", adjustStyling, false);
inpsToMonitor.addEventListener("mousedown", adjustStyling, false);
//-- Initial update. note that IE support is NOT needed.

if (document.getElementById("emailAddr").value == "") {
  document.getElementsByClassName("signinPlaceholder")[0].classList.remove("movePlaceholderUp");
} else {
  document.getElementsByClassName("signinPlaceholder")[0].classList.add("movePlaceholderUp");
}
var inpsToMonitor = document.getElementById("password");
inpsToMonitor.addEventListener("change", adjustStyling, false);
inpsToMonitor.addEventListener("keyup", adjustStyling, false);
inpsToMonitor.addEventListener("focus", adjustStyling, false);
inpsToMonitor.addEventListener("blur", adjustStyling, false);
inpsToMonitor.addEventListener("mousedown", adjustStyling, false);
//-- Initial update. note that IE support is NOT needed.

if (document.getElementById("password").value == "") {
 ...