Form

Accessible Forms using :focus-within Accessibility

From MDN

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused.

<form>
  <div>
    <label for="firstName">First Name</label
    ><input id="firstName" type="text" />
  </div>
  <div>
    <label for="lastName">Last Name</label>
    <input id="lastName" type="text" />
  </div>
</form>

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

This will change the form styling if any of the form elements are focused.

INFO

Article CSS-Tricks

:user-valid / :user-invalid

TODO: