HTML and CSS Reference
Figure 6-5. The :focus selector applied to a text field allows styles to be attached when the user
selects the field to start typing.
The :enabled and :disabled selectors both work with the Boolean disabled
attribute. The :enabled selector will apply a style to any form element that does not
have the disabled attribute present, while :disabled will apply a style to any ele-
ment that does have the disabled attribute present.
The :required and :optional selectors are like the :enabled and :dis-
abled selectors, except they are triggered by the presence or absence of the Boolean
The :read-only and :read-write selectors work in the presence or absence of
the Boolean readonly attribute. Some form controls, such as the file upload control
( type="file" as set in input ), are read-only by default and will be picked up by
the :read-only selector without the addition of the readonly attribute.
The :valid and :invalid selectors work like the :required and :optional
selectors, except they aren't tied directly to the required attribute. The :valid se-
lector will pick up any element that has no form validation constraints attached to it
( required attribute, pattern attribute, and so on), while :invalid will pick up
any element that has constraints, if those constraints are not met.
The :checked and :indeterminate selectors usually apply to check boxes and
radio buttons. The :checked selector will apply to these controls when they are in a
checked state. :indeterminate is a little more difficult to trigger. It is possible for
a check box to be in neither a checked nor unchecked state. Check box controls have a