CSS Master

css/chapter1/selectors-input.css (excerpt)

:out-of-range {

background: #ffeb3b;

}

:in-range {

background: #fff;

}

Shouldtheuserenter-3or101,thebackgroundcolorof#picknumwillchangeto
yellowasdefinedinour:out-of-rangeruleset(seeFigure1.50).Otherwise,it
willremainwhiteasdefinedinour:in-rangeruleset.

Figure 1.50. Styling :out-of-range values

:valid and :invalid

Withthe:validand:invalidpseudo-classes,wecansetstylesbasedonwhether
ornottheforminputmeetsourrequirements.Thiswilldependonthevalidation
constraintsimposedbythetypeorpatternattributevalue.Forexample,aninput
withtype="email"willbeinvalidiftheuserinputis“foo123,”asrepresentedin
Figure1.51.

Figure 1.51. An email field in the :invalid state

Aformcontrolwillhaveaninvalidstateunderthefollowingconditions:

■ whenarequiredfieldisanemptyfield

■ whentheuser’sinputdoesnotmatchthetypeorpatternconstraints

■ whenthefield’sinputfallsoutsideoftherangeofitsminandmaxattributevalues

Selectors 67