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
.first-name:focus {
  color: red;
}

.last-name:focus {
  color: lime;
}
HTML
<input class="first-name" value="I'll be red when focused">
<input class="last-name" value="I'll be lime when focused">

Syntax  

CSS
: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

CSS CSS Pseudo-class Layout Reference Web