Css text inputs effect with labels

Question

I have a text input field that has some label text nested inside it.When the user clicks to type in the field, on focus i am making the label text scale a little bit and moving it towards the top of the text field. It all works fine until you move onto the next input field. Then the field you just entered a value in changes back to the default scale and position.But i want it to stay up there after the user has typed something inside it. Any help would be appreciated.

form {
  width: 100%;
  text-align: center;
  padding: 45px 0;
}
form div {
  background: transparent;
  height: 55px;
  width: 100%;
  margin-bottom: 55px;
  position: relative;
}
input {
  width: 80%;
  height: 78px;
  border-radius: 25px;
  border-top: 4px solid #0275F5;
  border-right: 4px solid #0275F5;
  border-left: 4px solid #0275F5;
  border-bottom: 4px solid #0275F5;
  outline: 0;
  font-size: 1.6em;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.formHeading {
  font-size: 2.6em;
  color: #0275F5;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0;
}
form div label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0.25em;
  width: 100%;
  height: calc(100% - 1em);
  text-align: center;
  pointer-events: none;
  transition: .25s;
  text-transform: uppercase;
  font-size: 1.6em;
}
input:focus + label {
  transform: translate3d(0, -.8em, 0) scale3d(0.55, 0.55, 1);
}

<div id="wrapper">
  <h1 class="formHeading">Sign Up Form</h1>
  <form action="index.html" method="post">
    <div>
      <input type="text" name="user_name" id="name">
      <label>Name</label>
    </div>
    <div>
      <input type="email" name="user_email" id="email">
      <label>Email Address</label>
    </div>
    <div>
      <input type="password" name="user_password" id="password">
      <label>Password</label>
    </div>
    <div>
      <input type="text" name="user_city" id="city">
      <label>City</label>
    </div>
    <div>
      <input type="text" name="user_gender" id="gender">
      <label>Gender</label>
    </div>
  </form>
</div>

You'd have to check if the input is not empty, and in that case add a class to the element which you can use in CSS. The `:focus` selector only works if the element has focus, and there is no other selector that lets you check if the value is modified to be not empty, so you require JavaScript for this. — GolezTrol, Mar 11 '16 at 10:59
Possible duplicate of [Detect if an input has text in it using CSS?](http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css) — GolezTrol, Mar 11 '16 at 10:59

score 2 · Accepted Answer · answered Mar 11 '16 at 11:05

I don't think this can be done without javascript (edit: I see you added jquery and javascript, so this requirement shouldn't be a problem). As far as I know there is no way to match inputs in CSS where something has been entered, so you need JS to add a class to those inputs.

Here is a draft for a solution that uses jQuery, but you could also do this using plain JS.

$('input').blur(function() {
  console.log($(this).val());
  if ($(this).val() !== '') {
    $(this).addClass('hasvalue')
  } else {
    $(this).removeClass('hasvalue');
  }
});

form {
  width: 100%;
  text-align: center;
  padding: 45px 0;
}
form div {
  background: transparent;
  height: 55px;
  width: 100%;
  margin-bottom: 55px;
  position: relative;
}
input {
  width: 80%;
  height: 78px;
  border-radius: 25px;
  border-top: 4px solid #0275F5;
  border-right: 4px solid #0275F5;
  border-left: 4px solid #0275F5;
  border-bottom: 4px solid #0275F5;
  outline: 0;
  font-size: 1.6em;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.formHeading {
  font-size: 2.6em;
  color: #0275F5;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0;
}
form div label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0.25em;
  width: 100%;
  height: calc(100% - 1em);
  text-align: center;
  pointer-events: none;
  transition: .25s;
  text-transform: uppercase;
  font-size: 1.6em;
}
input:focus + label,
input.hasvalue + label {
  transform: translate3d(0, -.8em, 0) scale3d(0.55, 0.55, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
  <h1 class="formHeading">Sign Up Form</h1>
  <form action="index.html" method="post">
    <div>
      <input type="text" name="user_name" id="name">
      <label>Name</label>
    </div>
    <div>
      <input type="email" name="user_email" id="email">
      <label>Email Address</label>
    </div>
    <div>
      <input type="password" name="user_password" id="password">
      <label>Password</label>
    </div>
    <div>
      <input type="text" name="user_city" id="city">
      <label>City</label>
    </div>
    <div>
      <input type="text" name="user_gender" id="gender">
      <label>Gender</label>
    </div>
  </form>
</div>

Thanks! exactly what i was looking for! :) – krimz Mar 11 '16 at 11:20 — krimz, Mar 11 '16 at 11:20

Css text inputs effect with labels

1 Answers1