Google Material Design Input Boxes in CSS3

The HTML for this project will be very simple. We just need a form with two groups of inputs.

Here is the HTML:

<form>
  <div class="group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>
</form>

Here we have the four components we need.

• The input will serve as the input.
• The highlight will be the little highlight that flashes across the input.
• The bar will hold the two bars that make up the underline.
• The label will act as a placeholder until we click into our input. Then it will move and become a label.

With our simple HTML ready to go, let’s move on to the CSS transitions and animations.

We will activate all of our transitions and animations when the input is focused on. In CSS, we call that using input:focus. Let’s see how each part is created and activated.

We’ll absolutely position the label relative to the group. Here is the code for the label and when the input is focused:

/* LABEL ======================================= */
label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
}

/* active state */
input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

Now when we focus on our input, the label will change color, move up, and the font will get smaller. We also create the stylings for the :valid pseudo-class so that we can apply that if our input box is filled in. This will let the label stay in the active state, otherwise, it will move back over the input. All done here. Let’s move on to the underline.

We will use the pseudo-classes :before and :after to style the left and right parts of the bar. They will start from the center and widen to the outsides. That will give our underline effect.

/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 300px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

This is the part of our application where we will need to use an animation. We will need to have the highlight show up, move to the left, and disappear. Since there are three parts to this, we need to make an animation instead of a transition.

/* HIGHLIGHTER ================================== */
.highlight {
  position: absolute;
  height :60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */
input:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@keyframes inputHighlighter {
  from  { background: #5264AE; }
  to    { width: 0; background: transparent; }
}

Now we have our highlight working. With all of our CSS parts working, we now have an input box similar to the Google Material Design input boxes.

Thanks to Felipe Mammoli in the comments for the tip on creating this without any JS at all. All we have to do is add a required attribute to our input boxes like so:

<input type="text" required>

Once we have added that rule, we can use the :valid psuedo-class to check if something is typed into that input box. Now we can apply the class we had originally created to move our label above the input.

/* active state */
input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}