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.
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.
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);
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).
Search WWH ::

Custom Search