HTML and CSS Reference
In-Depth Information
Figure 13-11.
The second field remains pink because the value is invalid as an email address
9.
Change the value in the second field to a valid email address format. The field turns green.
10. Type a value in the third field that's invalid as a URl format. The field doesn't change
color to indicate an invalid value.
11. Fix that by adding a new selector to the style for invalid values. You can chain two
pseudo-classes to apply the style to optional fields that are invalid like this:
input:invalid
, input:optional:invalid
{
background-color: rgba(252, 231, 239, 0.5);
}
12. save and reload the page. Try entering an invalid value for the third field. The
background color still doesn't change because there's a conflict between
input:optional:invalid
and
input[type=
"url"]:optional
. Both set the
background-color
property, but attribute selectors and pseudo-classes have the
same specificity (see “What Happens When style Rules Conflict?” in Chapter 2).
13. Move the style rule that uses the attribute selector above the rule for invalid entries
like this:
input[type="url"]:optional {
background-color: transparent;
}
input:invalid, input:optional:invalid {
background-color: rgba(252, 231, 239, 0.5);
}
14. save and test the page again. This time, the third field changes color when you
enter an invalid value for a URl, as shown in Figure
13-12
.
