30-seconds-of-code/snippets/focus-within.md

Focus Within

The psuedo class :focus-within gives focus to a parent element like a form element when input elements receive focus.

HTML

  <form>
    <label for="given_name">Given Name:</label>
    <input id="given_name" type="text">
    <br>
    <label for="family_name">Family Name:</label>
    <input id="family_name" type="text">
  </form>

CSS

form {
  border: 3px solid #2d98da;
  color:  #000000;
  padding: 4px;
}

form:focus-within {
  background: #f7b731;
  color: #000000;
}

Demo

Explanation

Browser support

⚠️ Not supported in IE11 or the current version of Edge.

• https://caniuse.com/#feat=css-focus-within