| Version |
|---|
| CSS2 |
| IE8+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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.
Example
This rule applies a border around any
text textarea element that has focus:
textarea:focus {
border: 2px solid blue;
}Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| None | None | None | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
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.
Internet
explorer 8 automatically applies :focus to the
body by default. This is not specifically a bug as CSS
does not define which elements this pseudo class applies to or indeed how
the states are entered or left.
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.
