:focus-within

The :focus-within pseudo-class is used to apply style to the parent element that is being focused on. E.g. The parent div of a form input field.

 

The pseudo-class :focus-within defines the style of an element when it or elements within it receive focus. Unlike :focus, which is applied directly to the element itself :focus-within works for the parent.

This allows you to style the form style (entire or individual parts) for each form field individually.

Syntax

selector:focus-within {
        background: #f3f3f3; 
}

Example

Example field:
<form action="#">
    <div>Example field: <input value="focus on me" name="user" /></div>
</form>

form:focus-within {
     background: #f3f3f3;
     padding: 10px;
}