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 StandardThe definition of ':focus' in that specification. | Living Standard | Defines HTML-specific semantics. |
Selectors Level 4The definition of ':focus' in that specification. | Working Draft | No change. |
Selectors Level 3The 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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
See also
:focus by Mozilla Contributors is licensed under CC-BY-SA 2.5.