CSS Master

Figure 1.49. Using the adjacent sibling combinator and ::before pseudo-class to create custom radio controls

Inorderforthistechniquetowork,ofcourse,ourHTMLneedstobestructured

appropriately:

■ Thelabelelementmustbeimmediatelyadjacenttoitsinputcontrol.

■ Theformcontrolmusthaveanidattributeinadditiontothenameattribute(for

example,<input type="radio" id="chocolate" name="flavor">).

■ Thelabelmusthaveaforattribute,anditsvaluemustmatchtheidoftheform

control(forexample,<label for="chocolate">Chocolate</label>).

Associatingthelabelusingforwiththeinputensuresthattheforminputwillbe

selectedwhentheuserclicksortapsthelabeloritschildpseudo-element(::before).

:in-range and :out-of-range

The:in-rangeand:out-of-rangepseudo-classescanbeusedwithrange,number,

anddateinputcontrols.Using:in-rangeand:out-of-rangerequiressettingmin

and/ormaxattributevaluesforthecontrol.Here’sanexampleusingthenumberinput

type:

<p>

<label for="picknum">Enter a number from 1-100</label>

<input type="number" min="1" max="100" id="picknum" name=

➥"picknum" step="1">

</p>

Let’saddalittlebitofCSStochangestylesifthevaluesarewithinoroutsideof

ourrangeofoneto100:

66 CSS Master