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.
Syntax
:focus
Examples
HTML
<input class="red-input" value="I'll be red when focused."><br> <input class="blue-input" value="I'll be blue when focused.">
CSS
.red-input:focus { background: yellow; color: red; } .blue-input:focus { background: yellow; color: blue; }
Result
Accessibility concerns
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.
- Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
:focus { outline: none; }
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.
- Quick Tip: Never remove CSS outlines
Specifications
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:focus | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 8 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support