Blog

Ramblings on Front End Design & Development.

I came across a post recently by Chris Coyier explaining how to animate form labels on focus. I thought this was a pretty cool effect but wanted to take it a few steps further. In this post, I’ll enhance Chris’ original code by adding:

  • integration with Twitter Bootstrap form labels
  • hide the form label until the user clicks on an input, or puts it in focus.
  • adjust the look and feel to be a little more minimal.

Integration with Twitter Bootstrap

This isn’t actually that tough, we simply need to add some classes to input tags, add a class to the <div> that wraps each form group, and wrap the form in a bootstrap container. Here’s the HTML code, don’t forget to include Bootstrap 3.1.1 in the <head> of your document.

<div class="container">
 <div class="row">
  <div class="col-lg-12">
   <form class="go-bottom" role="form">
    <h2>To Bottom</h2>
    <div class="form-group">
     <input id="name" name="name" type="text" class="form-control" required>
     <label for="name">Your Name</label>
    </div>
    <div class="form-group">
     <input id="phone" name="phone" type="tel" class="form-control" required>
     <label for="phone">Primary Phone</label>
    </div>
    <div class="form-group">
     <textarea id="message" name="phone" class="form-control" rows="5" required></textarea>
     <label for="message">Message</label>
    </div>
   </form>
  </div>
 </div>

 <div class="row">
  <div class="col-lg-12">
   <form class="go-right" role="form">
    <h2>To Right</h2>
    <div class="form-group">
     <input id="name" name="name" type="text" class="form-control" required>
     <label for="name">Your Name</label>
    </div>
    <div class="form-group">
     <input id="phone" name="phone" type="tel" class="form-control" required>
     <label for="phone">Primary Phone</label>
    </div>
    <div class="form-group">
     <textarea id="message" name="phone" class="form-control" rows="5" required></textarea>
     <label for="message">Message</label>
    </div>
   </form>
  </div>
 </div>
</div>

Within the HTML you’ll notice two forms. I’m going to provide two different transition effects: one coming in from bottom to top, and the second coming in from left to right. When you’re cursor leaves the field, the animation will reverse itself.

Setting up the transition

Next we need to setup the CSS that will provide the transition or animation on the labels. Create a new file called styles.css and insert it into the <head> of your file, after the link to Twitter Bootstrap. The first thing we need to do is set our form-group <div>s to position relative and hide the overflowing label.

form > div {
 position: relative;
 overflow: hidden;
}

Setting up the label container

Next we need to setup the box that our label will appear in on focus. I’ve set the background colour to black with an opacity of 50%. If you have a really long value, it will run under the box, so we want to make it transparent so you can see what you are typing in. I’ve set the label color to white and set the z-index to 2 so that the box loads over top of our input.

form input:focus + label, form textarea:focus + label {
 background: rgba(0,0,0,0.5);
 color: #fff;
 z-index: 2;
 text-transform: uppercase;
}

Setting up the label

Now that we have our label container setup, let’s configure the actual label. We’re going to give it an absolute position so that it can be animated within our <div> which is set to relative positioning. I’ve added some padding so the label is vertically centered in a regular text input. We need to set the line-height to 1 so that no extra vertical spacing is added. Finally, I’ve declared my transition for the label. We are going to animate 3 things: the background, the position from bottom to top, and the position from left to right. Background is used by both forms but bottom to top is the first form, and left to right is the second form. I’ve put them all together here so that we can reuse our label declaration.

form label {
 position: absolute;
 padding: 10px 20px;
 line-height: 1;
 margin-bottom: 0;

 -webkit-transition:background 0.2s, top 0.2s, right 0.2s;
 -moz-transition: background 0.2s, top 0.2s, right 0.2s;
 transition: background 0.2s, top 0.2s, right 0.2s;
}

Setting up the first form

That’s it for the label, let’s setup the positioning for our first form. Note the .go-bottom class that is attached to the <form> tag, this will apply our first transition to that form. We want to hide the label container off the bottom of the input, so we set the top to 100%. When the label is shown, we want it on the right side of our input so we set right to 0. We’re also going to set the bottom position to 0 because we want the container to stretch vertically to fill the height of the input no matter it’s height. Instead of using a fixed width for our label container, let’s use a percentage to make it fluid. I’ve set the minimum width of the container to 20%. If the label is long, the container will expand to fit it.

form.go-bottom label {
 top: 100%;
 right: 0;
 bottom: 0;
 min-width: 20%;
}

Animating the first form

To animate the label container, we need to declare where it should end up at the end of the transition. We do this by setting top to 0. This will move the top edge of the container to the top of the input.

form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
 top: 0;
}

That’s it for our first form. You can check out a demo or move onto the second form.

Setting up the second form

For the second form, will animate the label container from the left edge of the input to the right edge. The code I setup for the form-group <div>, label container, and the actual label can be reused. All we need to alter here is the position of the label for the transition.

First, let’s setup the hidden state for the vertical animation. In this case I’ve pushed the label container off the left edge of the input and it remains invisible because overflow is hidden.

form.go-right label {
 top: 0;
 right: 100%;
 bottom: 0px;
 min-width: 20%;
}

Animating the second form

Like the first form, we need to set the opposite right position to trigger the transition. Set the right position to 0 and that will pull the label container across the input and line it up with the right edge of the input on focus.

form.go-right input:focus + label, form.go-right textarea:focus + label {
 right: 0;
}

That’s it, that’s all. Chris came up with a pretty cool effect that I was happy to extend into bootstrap. I also felt the need to put my personal spin on the look and feel. Hope you enjoyed the tutorial and hit me up on Twitter if you have any questions.

Check out all the code and a live preview at: http://codepen.io/cardeo/pen/Dnhgb

Browser Support

Currently this technique is supported by: Chrome, Firefox, Safari, and IE10/11.

Newsletter

My best content on Front End Design & Development.

No spam, ever. Subscribe for my best content and freebies.