Input Pseudo Classes

Input pseudo classes can be used to control how form data is displayed. Input pseudo classes allow us to create forms that change in real time depending on the user's input.

:focus: describes how an element that has focus should look.
:empty: describes how an element that has no children should look.
:checked: describes how an element that is checked should look.
:enabled: describes how an element that is enabled should look.
:disabled: describes how an element that is disabled should look.
:optional: describes how an element that is optional should look.
:required: describes how an element that is required should look.
:read-only: describes how an element that is read-only should look.
:read-write: describes how an element that is read-write should look.
:in-range: describes how an element that is in a given range should look.
:out-of-range: describes how an element that is out of range should look.
:valid: describes how an element that is valid should look.
:invalid: describes how an element that is invalid should look.

Example:

input:focus
{
   /* describe how an input element that has focus should look */
}

Write code that allows a user to input a name and an age. The age should be in the range 17-65. The webpage should set the background of out-of-range form input elements to red, as shown here.