« Best Practices for Validating Form Submissions | Main | Dean Edwards' IE7 Script-- Make IE6 Act Like IE7 »

Using CSS Selectors to Highlight Unedited Form Fields

At An Event Apart Boston, CSS guru Eric Meyers mentioned an incredibly sensible technique for giving users a simple means of telling which fields in a form they still need to fill out: use attribute selectors in your CSS to highlight form fields which still have a default or empty value after the user submits the form.

In your stylesheet write...

input[value=""] {
     background-color: #FFFFE1;
}

... and your form fields will be treated like the following...

Field 1:
Field 2:

This will color the background of any empty input field to a nice light yellow. Now your users can tell at a glance which fields they still need to fill out.

Post a comment


Type the characters you see in the picture above.