:focus (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

:focus {
declaration block
}

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.

Related Products