:focus
Quick Summary for :focus
: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.
Code Usage for :focus
/* Selects any <input> when focused */ input:focus { color: red; }
More Details for :focus
:focus
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
<div><input class="red-input" value="I'll be red when focused."></div> <div><input class="blue-input" value="I'll be blue when focused."></div>
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 outlinesSpecifications
Specification |
---|
HTML Standard # selector-focus |
Selectors Level 4 # focus-pseudo |
See also
:focus-visible
:focus-within
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language