Usability upgrade for forms with :focus selector

Today we will try to improve the usability of our forms, using the :focus selector. Unfortunately, this selector is only supported by Firefox, Safari and Opera. The Internet Explorer family completely ignore it:

Example:

Therefore we are able to use it for the other browsers as IE will not preform any action when :focus is used. We will use it today to style and improve forms in CSS for those specific browsers.

What is the :focus selector?

Take a look at the live example. When you visit that form of two input fields and one textarea, and you click on input field #2, you will see that input field #2 styled somewhat different as the other two. The :focus selector styles that input field #2, because you have selected that field.

CSS

input, textarea{
border:1px solid #ccc;
padding:4px;
background:#F4F4F4;}
input:focus, textarea:focus{
border:1px solid #000;
padding:4px;
background:#fff;}

HTML

<form method="post" action="">
  <label>Your Name<br /><input type="text" name="textfield" /></label>
  <label>Your Adress<br /><input type="text" name="textfield2" /></label>
  <label>Details<br /><textarea name="textarea" rows="5"></textarea></label>
</form>

These codes will provide you with the same style declarations as the example shows you and will work in Firefox, Safari and Opera. You should visit the live example as well.

Conclusion

I think the conclusion is simple: use it. Why shouldn’t you? You improve the usability for the users who choose for a proper browser, and the users who haven’t made that choice, don’t even know the feature is there. I still hope IE8 is going to be some-what better in supporting some-more advanced CSS features!