HTML and CSS Reference
In-Depth Information
submitted, something that until recently was possible only with JavaScript. In line with these changes, CSS3 has
introduced a large number of pseudo-classes that allow you to style form elements based on their state.
Because of the modularization of CSS3, only three of the new pseudo-classes were included in the CSS3
Selectors module, which was formally approved in September 2011. A further 10 have been added in the
draft CSS3 UI module. The only significance of the pseudo-classes being in different modules is the speed of
Table 13-4 lists all 13 pseudo-classes. The first three made it into the CSS3 Selectors module, and are fully
supported by all modern browsers, including IE 9. The others appear to have been an afterthought, and are being
gradually implemented.
Table 13-4. Pseudo-classes that Select Form Elements Based on Their State
Matches a form element that is not disabled.
Matches a form element that is disabled.
Matches a form element that has been checked or selected.
Matches a form element that is in an indeterminate state. See the following text for an
explanation of what this means.
Matches the default option(s) among a group of similar elements.
Matches elements that have a valid data value.
Matches elements that have an invalid data value.
Matches elements with a data value that's within the prescribed range.
Matches elements with a data value outside the prescribed range.
Matches required form elements.
Matches form elements that are not required.
Matches elements whose contents cannot be altered by the user.
Matches elements, such as text input fields, whose contents can be altered by the user.
A good place to check which browsers support the pseudo-classes in Table 13-4 (or any other Css feature)
is the Mozilla developer network's Css Reference at Reference .
Most of the pseudo-classes listed in Table 13-4 are self-explanatory. However, :indeterminate needs some
HTML5 introduces a new indeterminate DOM property for check boxes. By default, it's false . The only way
to turn it on is through JavaScript like this, for example:
document.getElementById('checkbox1').indeterminate = true;
Search WWH ::

Custom Search