HTML and CSS Reference
In-Depth Information
As soon as the check box is selected, the
indeterminate
property is switched to
false
. It remains
false
even
if the check box is subsequently deselected. When used with check boxes, the
:indeterminate
pseudo-class
applies only when the
indeterminate
property is set to
true
.
However, the draft specification gives as examples of the
:indeterminate
pseudo-class a radio button group
with no preselected option and a progress meter when the percentage completion is unknown. Neither case is
currently supported by any browser.
eXercISe: StYLING FOrM INpUt FIeLDS
This exercise demonstrates the use of some of the pseudo-classes in Table
13-4
, changing the look of form
input fields depending on their current state. The styles in this exercise work in all modern browsers except
IE 9. Use form_begin.html in the ch13 folder as your starting point. The completed form is in form_end.html.
1.
load the form into a browser. The existing styles align the input fields and set the
font properties, but otherwise the form is unstyled (see Figure
13-9
).
Figure 13-9.
The form has only basic styles
2. In the
<style>
block in the
<head>
of the page, add the following styles to give
fields with valid input values a pale green background, and a pale pink background
to invalid ones:
input:valid {
background-color: rgba(188, 237, 180, 0.5);
}
input:invalid {
background-color: rgba(252, 231, 239, 0.5);
}
3.
save the page, and reload the form in a browser. In all browsers that support the
:valid
and
:invalid
pseudo-classes, the first, second, and fourth input fields have
a pale pink background. This is because the HTMl markup for each of these input
fields includes the HTMl5
required
attribute. Without a value, the field is considered
invalid. However, the third field doesn't use the required attribute, so it's considered
valid and colored green. some browsers also consider the submit button or both the
submit and reset buttons as valid, so give them the same background color (although
you can't see the colors in Figure
13-10
in the printed book, use your imagination).
