CSS :focus-within

The :focus-within pseudo-class matches an element when it or one of its descendants has focus. It is useful for form groups, search boxes and interactive panels.

Syntax

.field:focus-within {
  border-color: #2563eb;
}

Example

.field:focus-within {
  border-color: #2563eb;
  background: #eff6ff;
}

.field input:focus {
  outline: none;
}

Result:Email

Important note

The selector usually belongs on the ancestor, such as .field:focus-within, not on the focused input itself.