Codectionary / Developer documentation / CSS

:focus-visible and :focus-within

:focus-visible applies only when the browser determines focus should be visibly indicated - typically keyboard navigation, not a mouse click - solving the old complaint of unwanted focus rings on click. :focus-within applies to a parent element when any descendant inside it has focus, useful for highlighting an entire form group when one of its fields is active.

Syntax

:focus-visible { }
:focus-within { }

Examples

:focus-visible - Smarter Focus Rings

Showing a focus ring for keyboard users without cluttering mouse interactions.

/* Demo setup: sizing, structure or neutral surfaces. */
button{padding:1rem;border:1px solid #64748b}

.button:focus {
  outline: none; /* remove the default outline for ALL focus, including mouse clicks */
}

.button:focus-visible {
  outline: 2px solid #3b82f6; /* but restore it specifically for keyboard focus */
  outline-offset: 2px;
}
  1. The button is keyboard-focusable without a tabindex workaround.
  2. The focus-visible rule supplies a ring when the browser determines a visible indicator is appropriate.
  3. Clicking and keyboard navigation may produce different states; keyboard access should always retain a clear indicator.
HTML used by this example
<p>Press Tab to focus the button:</p><button class="button">Keyboard focus target</button>

:focus-within - Highlighting a Parent Group

Styling an entire form field group when any of its inputs are focused.

/* Demo setup: sizing, structure or neutral surfaces. */
.field-group{padding:1rem}input{display:block;padding:.5rem;margin-block:.5rem}

.field-group {
  border: 1px solid #d1d5db;
  transition: border-color 0.15s ease;
}

.field-group:focus-within {
  border-color: #3b82f6; /* highlights the whole group, not just the individual input */
}
  1. Focus the nested input with the mouse or keyboard.
  2. The parent matches :focus-within while the input has focus.
  3. Moving focus outside the group removes the parent highlight.
HTML used by this example
<div class="field-group"><label for="search">Search lessons</label><input id="search" type="search" placeholder="Try CSS"></div>

Parameters and values

  • :focus-visible (pseudo-class): Focus styling that only appears for keyboard/non-pointer interaction
  • :focus-within (pseudo-class): Matches a parent when any descendant has focus

Best practices

  • Use :focus-visible instead of :focus for custom focus ring styling - it correctly avoids showing rings on simple mouse clicks while preserving them for keyboard users
  • Use :focus-within to visually group and highlight a fieldset or custom dropdown component when any part of it is actively focused
  • Never combine outline: none with :focus alone and no :focus-visible fallback - that removes focus indication entirely, a serious accessibility regression
  • Test focus behavior with actual keyboard (Tab key) navigation, not just mouse clicks, to confirm the intended pseudo-class is doing what you expect

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading