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.
:focus
<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; }
Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.
Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | Yes | 1 | 8 | 7 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | ? | Yes | 4 | 6 | 1 | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus