HTML and CSS Reference
In-Depth Information
Fortunately, you can easily get around this by applying a class to the parent form when the
invalid
event has fired and adding the pseudo-class selector,
:invalid
, to the CSS
rules for the input and selector elements in the form.
Note
Please don't change the CSS file that you included in your application's directory when
you started the chapter. In this section, we're walking through the theoretical changes you
might make rather than directing you to make changes.
In the previous section, you applied a class to the parent form. So, now add the pseudo-
class selector,
:invalid
, to the CSS:
form
.
invalid input
:
invalid
,
form
.
invalid select
:
invalid
,
form
.
invalid input
.
invalid
,
form
.
invalid select
.
invalid
{
background-color
: #FFD4D4;
border
: 1px solid maroon;
}
The order form also uses the
:required
pseudo-class to style required fields with a light
yellow background:
input
:
required
,
select
:
required
{
background-color
: lightyellow;
}
A screenshot of the required and invalid field styling is shown in
figure 2.11
.
Figure 2.11. The required fields are styled with a light yellow background (left), as you can see in the Name on Card
and Expiry Date fields. The invalid fields are styled with a light red background and a maroon border (right), as
shown in the Credit Card No. and CVV2 No. fields.
