While forms are used on almost every site, they are rarely themed. The out of the box forms that are rendered by our browsers are nice looking, but are still very old and plain. It is time to start theming forms properly!

In this article, I will explain how to customize forms in a nice elegant way. There are many different ways to do this. but here is one example.

(Click inside the different fields of this form below.)

Form Labels

This little form uses all kinds of CSS3 goodness. Transitions, transforms, border-radius, and animations! Lets start with the basic HTML for a single text field.

<form id="example-form">
  <div class="form-wrapper">
    <input type="text" value="" name="first-name" id="first-name" placeholder="Enter First Name" />
    <label for="first-name">First Name</label>
  </div>
</form>

Nothing special here. We create a text field input element, a label, wrap it in a div, and place everything inside of the form element. We add the basic attributes such as name, id, and a placeholder for when there is no text in the text field. Now to the CSS. The CSS is what makes everything flow together. Lets start with some basics.

The first thing we are going to do is set up the label and input fields.

label {
  background: #273;
  border-radius: 2px 2px 0 0;
  color: white;
  display: none;
  font-size: 80%;
  padding: 0.2em 0.5em;
  position: absolute;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: auto;
}
 
input, 
textarea {
  border: 1px solid rgba(30, 110, 45, 0.5);
  padding: 0.4em 0.5em;
}
 
label, 
input, 
textarea {
  outline: none; /* Get rid of the browser outline. */
  top: 0px;
  width: 100%;
}
 
input:focus, 
textarea:focus {
  background-color: #efe;
  border: 1px solid #273;
}

The CSS added a nice touch. The label is now hidden and there is now a nice border when we focus on the form input elements. I also added a light green background. This will apply when tabbing through forms as well!

Now most of the magic happens to the label. We have to get it to show when focused, add a slight bounce (if desired), and then place it on top of the form. The CSS should look a little bit like this:

/**
 * CSS we wrote before. Nothing changed here.
 */
label {
  background: #273;
  border-radius: 2px 2px 0 0;
  color: white;
  display: none;
  font-size: 80%;
  padding: 0.2em 0.5em;
  position: absolute;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: auto;
}
 
input, 
textarea {
  border: 1px solid rgba(30, 110, 45, 0.5);
  padding: 0.4em 0.5em;
}
 
label, 
input, 
textarea {
  outline: none; /* Get rid of the browser outline. */
  top: 0px;
  width: 100%;
}
 
input:focus, 
textarea:focus {
  background-color: #efe;
  border: 1px solid #273;
}
 
/**
 * New CSS to show the label.
 */
 
/* Adding the bounce. */
@-webkit-keyframes bounce { 0% { top: 0px; } 50% { top: -7px; } 100% { top: 0px }}
@keyframes bounce { 0% { top: 0px; } 50% { top: -7px; } 100% { top: 0px }}
 
/* Showing the label on focus */
input:focus + label, 
textarea:focus + label {
  -webkit-animation: bounce 500ms;
  animation: bounce 500ms;
  display: block;  
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

And that is all there is to it. Every HTML element on your site should have its own style guide to follow. Even if it is something subtle, make sure custom theming takes place. Whether it is a form, a list, or an image, CSS should have some hooks in it.

Tags