Selector the :user-valid and :user-invalid pseudo-classes

The :user-valid and :user-invalid pseudo-class
selectors help improve the user experience of
input validation by giving feedback about mistakes
only after a user has changed input.

Example

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}