Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

:focus (CSS selector)

Browser support full matrix
IE7 FF1+ Saf1.3+ Op9.2+
None Full Full Full
Spec
Version
CSS2

Example

This rule applies a border around any text textarea element that has focus:

textarea:focus {
  border: 2px solid blue;
}

Try it yourself!View all demos

Description

This pseudo-class matches any element that has keyboard input focus. Keyboard input focus describes any element that’s ready to receive user input. It can apply to a form control, for instance, or to a link if the user navigates using the keyboard.

Compatibility

IE5.5None
6.0None
7.0None
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

Internet Explorer 7 and earlier versions don’t support this pseudo-class; however, Internet Explorer 5.5 and 6 incorrectly apply the pseudo-class :active to links that have keyboard input focus—a state that should be matched by this pseudo-class.

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters