Placeholder overlapping on input focus

Question

My input is overlapping with the text in its place holder after text is already in its spot.

My HTML For this Form:

<form action="./includes/login.inc.php" method="post">
    <div class="group">
        <input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
        <label>Email</label>
    </div>
    <div class="group">
        <input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
        <label>Password</label>
    </div>
    <div class="btn-box">
        <button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
    </div>
</form>

And here is my style sheet, just for this form and nothing else:

form {
  width: 320px;
  margin: 45px auto;

}
form h1 {
  font-size: 3em;
  font-weight: 300;
  text-align: center;
  color: #2196F3;
}
form h5 {
  text-align: center;
  text-transform: uppercase;
  color: #c6c6c6;
}
form hr.sep {
  background: #2196F3;
  box-shadow: none;
  border: none;
  height: 2px;
  width: 25%;
  margin: 0px auto 45px auto;
}
form .emoji {
  font-size: 1.2em;
}

.group {
  position: relative;
  margin: 45px 0;
}

textarea {
  resize: none;
}

input,
textarea {
  background: none;
  color: #4F4F4F;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 320px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #4F4F4F;
}
input:focus,
textarea:focus {
  outline: none;
}
input:focus ~ label,
textarea:focus ~ label {
  top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
  width: 335px;
}

input[type="password"] {
  letter-spacing: 0.3em;
}

label {
  color: #4F4F4F;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

.bar {
  position: relative;
  display: block;
  width: 320px;
}
.bar:before {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #FF3B3F;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
  left: 0%;
}

.btn {
  background: #fff;
  color: #959595;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
  color: #752021;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
  background: #FF3B3F;
  color: #d3eafd;
}
.btn.btn-link:hover {
  background: #0d8aee;
  color: #deeffd;
}
.btn.btn-submit {
  background: #FF3B3F;
  color: white;
}
.btn.btn-submit:hover {
  background: #752021;
  color: white;
}
.btn.btn-cancel {
  background: #eee;
}
.btn.btn-cancel:hover {
  background: #e1e1e1;
  color: #8b8b8b;
}

.btn-box {
  text-align: center;
  margin: 50px 0;
}

To be clear I want it to look like the bottom "Password" field when you deselect from the box. The text when its on top of the input moves back down to the bottom and overlaps it when you are deselecting.

Thanks for any help.

Answer 1

You can achieve that with jQuery .focus() and . blur() functions. First of all create a class with the focused style of your label. On input focus check if it has some value. If it has the focused class remains, otherwise remove it. Check the code bellow:

css

label.focused {
    top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}

jQuery

$('input').focus(function() {
  $(this).siblings('label').addClass('focused');
}).blur(function () {
  if($(this).val().length == 0) {
    $(this).siblings('label').removeClass('focused');
  }
});

Full code

 $('input').focus(function() { $(this).siblings('label').addClass('focused'); }).blur(function () { if($(this).val().length == 0) { $(this).siblings('label').removeClass('focused'); } }); 

 form { width: 320px; margin: 45px auto; } form h1 { font-size: 3em; font-weight: 300; text-align: center; color: #2196F3; } form h5 { text-align: center; text-transform: uppercase; color: #c6c6c6; } form hr.sep { background: #2196F3; box-shadow: none; border: none; height: 2px; width: 25%; margin: 0px auto 45px auto; } form .emoji { font-size: 1.2em; } .group { position: relative; margin: 45px 0; } textarea { resize: none; } input, textarea { background: none; color: #4F4F4F; font-size: 18px; padding: 10px 10px 10px 5px; display: block; width: 320px; border: none; border-radius: 0; border-bottom: 1px solid #4F4F4F; } input:focus, textarea:focus { outline: none; } /*input:focus ~ label, textarea:focus ~ label { top: -14px; font-size: 12px; color: #FF3B3F; }*/ label.focused { top: -14px; font-size: 12px; color: #FF3B3F; } input:focus ~ .bar:before, textarea:focus ~ .bar:before { width: 335px; } input[type="password"] { letter-spacing: 0.3em; } label { color: #4F4F4F; font-size: 16px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; -webkit-transition: 300ms ease all; transition: 300ms ease all; } .bar { position: relative; display: block; width: 320px; } .bar:before { content: ''; height: 2px; width: 0; bottom: 0px; position: absolute; background: #FF3B3F; -webkit-transition: 300ms ease all; transition: 300ms ease all; left: 0%; } .btn { background: #fff; color: #959595; border: none; padding: 10px 20px; border-radius: 3px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; outline: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn:hover { color: #752021; box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12); } .btn.btn-link { background: #FF3B3F; color: #d3eafd; } .btn.btn-link:hover { background: #0d8aee; color: #deeffd; } .btn.btn-submit { background: #FF3B3F; color: white; } .btn.btn-submit:hover { background: #752021; color: white; } .btn.btn-cancel { background: #eee; } .btn.btn-cancel:hover { background: #e1e1e1; color: #8b8b8b; } .btn-box { text-align: center; margin: 50px 0; } 

 <form action="./includes/login.inc.php" method="post"> <div class="group"> <input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span> <label>Email</label> </div> <div class="group"> <input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span> <label>Password</label> </div> <div class="btn-box"> <button class="btn btn-submit" type="submit" name="login-submit">Sign in</button> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>