UI pseudo-classes
:enabled and :disabled
These pseudo-classes can be great for form usability, enabling and disabling form elements based on what the visitor has already filled out.
:checked
Target the element when it has been checked i.e. radio button and checkboxes.
input[type=checkbox]:checked + label {color:red;} <input type="checkbox" id="test1ck"> <label for="test1ck">Check and Uncheck Me</label>
Form related UI pseudo-classes
All of the following pseudo-classes should be self explanatory :)
:valid and :invalid
:required and :optional
:in-range and :out-of-range
:read-only and :read-write
:default
<div> <input type="number" min="5" max="7" id="test3ck" required="required"> <label for="test3ck">Number between 5 and 7</label>
<input type="color" pattern="#[a-fA-F0-9]{6}" id="test4ck"> <label for="test4ck">Hexidecimal color</label> </div>
View the demo (currently best viewed in Chrome)