Google Material Design Input Boxes in CSS3

Google Material Design is all the rage right now. With Google announcing the new design philosophy, and using Polymer to create rich animated applications, many developers are starting to incorporate these ideas into their own experiments.

We created our own

Google Material Design Checkboxes using CSS3 last week and here are some more examples of Google Material Design:

Today we’ll be looking at how to recreate the

Polymer input boxes using CSS. Here is an example:

See the Pen Google Material Design Input Boxes by Chris Sevilleja (@sevilayha) on CodePen.

Getting Started

We will be doing all of this in CSS and just a tiny bit of JavaScript (

too bad it couldn’t be pure CSS now fully CSS). Let’s start setting up our HTML so that we can style it and add our animations and transitions in CSS.

The HTML

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

Note: We are working within Codepen. 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 onto the CSS transitions and animations.

Animating the Input

We’ll break this down into three parts:

the label/placeholder, the underline, and the highlight. Let’s style the foundation so we have a good starting point.

For simplicities sake, we won’t be adding the vendor prefixes like -moz- and -webkit-.
/* form starting stylings ------------------------------- */
.group        { 
  position:relative; 
  margin-bottom:45px; 
}
input         {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus     { outline:none; }

We’re just placing things and adding some padding with the code above. We also set the

group to position:relative; so that we can place the other elements relative to that. Now let’s start looking at animating our parts. The two techniques we’ll use are CSS transitions and CSS animations.

Animating on Focus

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.

Moving the Label/Placeholder CSS Transition

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 onto the underline.

Underline Bar Animation CSS Transition

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%;
}

Highlight Animation CSS Animation

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.

JavaScript to Position Label

This method has been replaced by the method below.

We have one last thing to finalize with our implementation of these input boxes. Once typing into an input box and clicking out of it, the label moves back over the input. It now overlaps the content we just wrote. We already created a class to make the label position itself above the input box earlier with the

input.used CSS class. All we have to do now is apply it using jQuery.

$(document).ready(function() {

  $('input').blur(function() {

    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });
  
});

Just like that we’re all good to go!

See the Pen Google Material Design Input Boxes by Chris Sevilleja (@sevilayha) on CodePen.

Update! No JS Necessary!

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;
}

Conclusion

There’s a cool way to implement Google Material input boxes in CSS. While it doesn’t have all the fancy parts of the official

input boxes like animating based on the location of the click event, they’re looking pretty good! For more Material Design, take a look at the Polymer Project to create cool Material Design components. Also, here’s a cool Codepen of our demo with input validation by Don Page and another great project to create Material Design components in CSS/JS: Waves. If you’re looking for these inputs and want to use Angular and have it validated with Angular, Martin Hotell has updated this in his awesome Angular Validated Plunker.

Edit: Removing needed JS for full CSS version.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.