CODEWITHSUNDEEP
htmlcss
Corey Rinda
Corey Rinda

Reputation: 103

Placeholder overlapping on input focus

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

The Top is what I am trying to fix, and the bottom is what I want it to look like once you deselect the input field.

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.

Upvotes: 0

Views: 2430

Answers (1)

Αntonis Papadakis
Αntonis Papadakis

Reputation: 1242

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>

Upvotes: 1

Related Questions