We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.

/* Selects any <input> when focused */
input:focus {
  color: red;

Note: This pseudo-class applies only to the focused element itself. Use :focus-within if you want to select an element that contains a focused element.





<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">


.red-input:focus {
  background: yellow;
  color: red;

.blue-input:focus {
  background: yellow;
  color: blue;



Specification Status Comment
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.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1871
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1 ? Yes461 ?

See also

Document Tags and Contributors

Last updated by: fscholz,