CSS - :focus
The :focus
CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).
Example
CSS
Copy Code
.first-name:focus { color: red; } .last-name:focus { color: lime; }
HTML
Copy Code
<input class="first-name" value="I'll be red when focused"> <input class="last-name" value="I'll be lime when focused">
Syntax
CSS
Copy Code
:focus <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a> <var>style properties</var> <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a>
Description
The :focus
CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).
This pseudo class applies only to the focused element, not its parents, like :checked
and :enabled
but unlike :active
or :hover
.
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1) | 8.0 | 6.0 | 1.0 |
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of ':focus' in that specification. |
Living Standard | Defines HTML-specific semantics. |
Selectors Level 4 The definition of ':focus' in that specification. |
Working Draft | No change |
Selectors Level 3 The definition of ':focus' in that specification. |
Recommendation | No change |
CSS Level 2 (Revision 1) The definition of ':focus' in that specification. |
Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:focus