:focus-within
Matches an element that either has focus itself or contains an element with focus. Lets you highlight an entire form or card.
Example
#.search {
border: 1px solid #3f3f46;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search:focus-within {
border-color: #a78bfa;
box-shadow: 0 0 0 3px rgb(167 139 250 / 0.3);
}<label class="search" style="display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #18181b;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#a1a1aa" stroke-width="2.5" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
<input placeholder="Search the docs" style="flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit;">
</label>Click the field. The whole container with the icon gets the outline, so the field itself can stay borderless.
Definition and usage
#The :focus-within pseudo-class carries focus information up the tree. It matches the focused element and all of its ancestors. A form with :focus-within changes appearance the moment the user clicks any of its fields.
It’s a simple way to highlight a whole group: a form row, a search field with an icon, or a card with buttons. Effects like this used to require JavaScript.
It works with any kind of focus, including a mouse click. If you want to react only to keyboard focus, combine :has() with :focus-visible: .card:has(:focus-visible).
Syntax
#selector:focus-within { property: value; }Common uses
#- Click any field: the whole form lights up.
- Only the label holding the active field lights up.
- The form stays dimmed until you click into one of its fields.
.demo:focus-within label:not(:focus-within)
Focus mode: while you type in one field, the other one fades.
Common uses in practice
#.demo:focus-within
.demo:focus-within {
background: rgb(124 58 237 / 0.2);
outline: 2px solid #a78bfa;
}label:focus-within
label:focus-within { color: #fbbf24; }.demo:not(:focus-within)
.demo:not(:focus-within) { opacity: 0.55; }.demo:focus-within label:not(:focus-within)
.demo:focus-within label:not(:focus-within) { opacity: 0.4; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- When you hide a field’s outline inside a larger component, show focus on the whole component through
:focus-within. The indicator must stay visible. - A dropdown menu opened by
:hovershould also open through:focus-within. That way it can be used from the keyboard too.
Related entries
#- :focusMatches the element that has focus, meaning it currently receives keyboard input, such as a clicked form field.
- :focus-visibleMatches a focused element only when the browser decides the indicator should be visible, such as during keyboard navigation.
- :has()Selects an element based on what it contains or what follows it. Lets you style a parent according to its children.
- :hoverMatches the element the mouse cursor is currently over. The basis of hover effects on buttons, links, and cards.
- :invalidMatches form fields whose value breaks an HTML validation rule, such as an empty required field or a malformed email address.
Spotted a mistake or missing an example? Write to us.