Are you a member? Register or Login

Helpful HTML Form Feedback With CSS3 Transitions

Designers may have noticed an ever-increasing use of CSS3 transition properties. Website interfaces have been dramatically improved with custom animation styles, all without the need for JavaScript (when used sensibly, of course!)

In this tutorial I want to demonstrate how we can build animation effects in HTML5 input fields. I’ll be designing a simple contact form with a couple of fields and a textarea. Using the CSS3 :valid pseudo class it is easier than ever to customize text inputs. Check out my live demo example to get an idea of what the final product looks like.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Digital Assets

Live DemoDownload Source Code

Starting the Document

We need to start with a blank index.html file using the standard HTML5 doctype. I’ll be including some alternate web fonts to spruce up the design. But it’s nothing which will dramatically affect the quality of the tutorial.

The more interesting section of the page relates to setting up a generic HTML5 form. The submit button doesn’t do anything but reload the page. However it does not suggest you couldn’t link to a backend PHP or Ruby script for data processing, or even connecting via Ajax. The CSS3 transitions should only affect frontend styles and nothing more.

Each input is contained inside a div with the class .row to keep the elements separated. This way it’s much easier to have the label displaying right next to the input field. And similarly to include other notices or warnings over to the right side of the fields. Each input is given the class .txt while the textarea element is styled using .txtarea.

CSS Layout Structure

I want to jump into our CSS code and start by explaining the CSS resets. I use a similar block template for resetting browsers to similar defaults of font sizes, line-height, and also box-sizing. Plus I am setting the various web fonts and structuring basic elements with proper spacing. Feel free to save this template for use in other web projects.

Moving into the core body section we have a wrapper div using the ID #w. This is centered on the page with a limited width of 660px. The internal row elements are styled as block containers, with internal labels and form input fields.

The small class .req is for required asterisk characters used throughout the labels. But even more interesting is the last section of code for overriding the internal placeholder text. Not all CSS3 browsers fully support these properties, but they do work in updated Webkit and Mozilla engines.

You’ll notice the internal form text placeholders are now italicized and take on a text color shade of dark grey/blue. I find this extra CSS helps to distinguish from the actual user-typed letters vs placeholder sample text.

Styling with Transitions

I want to jump into the final section discussing how we can use pseudo classes to perform animations. The most important styles begin with the .txt and .txtarea classes used on each form element.

I have done a lot of customizing with newer CSS3 properties. But also note how I have split up the individual background settings by their unique properties – like background-color and background-image. This is necessary when we need to animate the checkmark into the input without sliding all the way from the left. Instead we keep it tucked just off to the right where it is hidden from view, and then animate in from the right side.

You’ll also notice that the codes for :focus and :valid are very different. This is another reason why splitting the properties is such a good idea, because we might animate something in one pseudo class but not the other. Each transition property is targeting all changes, so this means you have to be careful about which properties are being updated.

Consider that the user might enter a valid name only to delete it a few seconds later. Our valid selector will need to re-animate back to the basic properties – but still keeping the :focus properties displaying as well. Segmented animation is the key to getting these styles working. It will require some trial & error but these effects could also be duplicated on every legacy browser with additional JavaScript.

One other aspect of the animated form is the submit button. Obviously the additional effects are negligible compared to the input fields. But I think all the properties are worth examining since they do relate to each other.

Instead of setting up various background properties I’ve just used CSS3 gradients and their vendor-specific prefixes. This keeps the background stable while still enhancing the box shadows via hover and active states.

css3 animation howto input forms styles screenshot

Live DemoDownload Source Code

Final Thoughts

The process of building formal CSS3 animations does take work. There are external libraries like Animate.css which can help, but still do not provide as much support as JavaScript. Thankfully the CSS3 standards are advanced enough to provide basic animations – hover, focus, and similar pseudo classes.

I do hope this tutorial can offer a sample codebase for web developers. You can learn a lot by just practicing techniques for a couple of hours. Feel free to download a copy of my sample codes and play around with different settings. It is not as difficult as you might expect to implement similar transitions on your own website.