Tutorial

Google Material Design Input Boxes in CSS3

Draft updated on Invalid Date
Default avatar

By Chris on Code

Google Material Design Input Boxes in CSS3

This tutorial is out of date and no longer maintained.

Introduction

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:

http://codepen.io/sevilayha/pen/IdGKH

Getting Started

We will be doing all of this in CSS and just a tiny bit of JavaScript. 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 on to 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.

Note: For simplicity’s 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 on to 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

Note: 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!

http://codepen.io/sevilayha/pen/IdGKH

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Chris on Code

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel