CSS Master

quiredbeforesubmission.Forexample,thefollowingCSSwilladdayellowborder

toouremailfieldfromabove,andisshowninFigure1.47:

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

input:required {

border: 1px solid #ffc107;

}

Figure 1.47. Indicating that a field is required with :required

The:optionalclassworkssimilarly,bymatchingelementsthatdonothaveare-

quiredattribute.Forexample,theCSSthatfollowsgivesustheresultsseenin

Figure1.48.

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

select:optional {

border: 1px solid #ccc;

}

Figure 1.48. An optional select element styled with the :optional pseudo-class rendered in Firefox 40

:checked

Unliketheotherpseudo-classesthatwe’vecovered,:checkedonlyappliestoradio

andcheckboxformcontrols.Asthenameindicates,thispseudo-classletsusdefine

separatestylesforselectedinputs.

Unfortunately,stylingradiocontrolsandcheckboxesinmostbrowsersisaboutas

pleasantasatriptothedentistforafilling.CSSBasicUserInterfaceModuleLevel

420 attemptstoaddressthiswiththeappearanceproperty,butthispropertyisnot

(^20) http://dev.w3.org/csswg/css-ui-4/#appearance-switching
64 CSS Master