HTML and CSS Reference
In-Depth Information
Figure 13-10. Without a value, the required input fields have a pink background
4. Remove the background color from the field that's not required by using the
:optional pseudo-class to set its background color to transparent :
input:optional {
background-color: transparent;
}
5. If you test the page again, the green background disappears from the third input
field in all browsers. But in WebKit-based browsers, it also removes the background
color of the submit and reset buttons. To avoid affecting the buttons, change the
selector in the previous step to select only the input field, which uses the HTMl5 url
type.
input[ type="url" ]:optional {
background-color: transparent;
}
6. There are two buttons in the form, but the submit button is the default. so, you can
give it a background color of its own, and style the text using the :default
pseudo-class like this:
input:default {
background-color: #167F39;
color: #FFF;
font-weight: bold;
}
7.
save the page, and reload the form in a browser. As soon as you start typing in the
first text input field, the background color turns green, indicating that the field is
now valid.
8.
Tab to the next field or click inside it. Type a value that's not valid as an email
address format, and move to the next field. The background of the second field
doesn't change color, indicating that it's not valid, as shown in Figure 13-11
(again, you'll need to use your imagination—the colors look almost identical in
the printed book).
Search WWH ::




Custom Search