:focus
Matches the element that has focus, meaning it currently receives keyboard input, such as a clicked form field.
Example
#.input {
border: 1px solid #52525b;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
border-color: #a78bfa;
box-shadow: 0 0 0 3px rgb(167 139 250 / 0.35);
outline: 2px solid transparent;
}<label style="display: grid; gap: 6px;">
Email address
<input class="input" type="email" placeholder="Click the field" style="padding: 10px 12px; border-radius: 10px; background: #18181b; color: inherit; font: inherit;">
</label>A transparent outline isn’t visible day to day. In Windows high-contrast mode, shadows disappear and the outline gets a system color, so focus is still visible.
Definition and usage
#An element has focus when keystrokes go to it. Form fields get focus when clicked, and so do links, buttons, and other interactive elements while tabbing through the page with the Tab key. At any moment, at most one element on the page has focus.
The :focus pseudo-class always matches while an element has focus, no matter how it got it. In many browsers a button clicked with the mouse also gets it, which is why the outline after a click is often seen as ugly. The fix isn’t outline: none, but :focus-visible, which shows the indicator only when it’s actually needed.
Plain elements like div don’t accept focus. You can change that with the tabindex="0" attribute, which adds the element to the Tab order, or tabindex="-1", which lets the element be focused by a click or a script, while Tab skips over it. To style a container when something inside it has focus, use :focus-within.
Syntax
#selector:focus { property: value; }Common uses
#- Click the field: a purple outline appears. Click elsewhere and the outline disappears.
- Click the button with the mouse. In most browsers it gets focus too, so the outline appears even after a click.
- A plain
divwith atabindex="0"attribute can have focus too. Click it, or tab to it with the Tab key. - With nothing before the colon, the rule applies to every element with focus. Click into the preview and tab through it.
Common uses in practice
#input:focus
input:focus {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}[tabindex]:focus
div with a tabindex="0" attribute can have focus too. Click it, or tab to it with the Tab key.[tabindex]:focus { background: #7c3aed; color: #fff; }:focus
:focus {
outline: 2px dashed #10b981;
outline-offset: 3px;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Never remove the focus indicator without a replacement. If the outline after a click bothers you, move the style to
:focus-visibleinstead of writingoutline: none. - The focus indicator must be clearly visible. Accessibility guidelines recommend a contrast of at least 3:1 against the surroundings.
- Focus order follows the order of elements in the HTML. Don’t change it with positive
tabindexvalues; reorder the markup instead.
Related entries
#- :focus vs :focus-visiblefocus matches any element that has focus, even after a mouse click. focus-visible only shows an indicator where the browser decides it’s actually needed.
- :focus-visibleMatches a focused element only when the browser decides the indicator should be visible, such as during keyboard navigation.
- :focus-withinMatches an element that either has focus itself or contains an element with focus. Lets you highlight an entire form or card.
- :hoverMatches the element the mouse cursor is currently over. The basis of hover effects on buttons, links, and cards.
- :activeMatches an element at the moment it’s activated, most often while the mouse button is pressed down on a button or link.
- outlineDraws an outline around an element that doesn’t take up space in the layout.
Spotted a mistake or missing an example? Write to us.