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.

 
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>