yetsupported.WebKit/Blink-basedbrowsersandFirefoxdo,however,support
nonstandard,vendor-prefixedversionsofit.
Inordertocreatecustomradiobuttonandcheckboxinputsthatworkwellacross
browsers,weneedtobecomecleverwithourselectors.We’lluseasiblingcombin-
ator,apseudo-element,and:checkedtocreatecustomradiobuttonandcheckbox
controls.Forexample,tochangethestyleofalabelwhenitsassociatedradiobutton
ischecked,wecouldusethefollowingCSS:
[type=radio]:checked + label {
font-weight: bold;
font-size: 1.1rem;
}Thismakesthelabelboldandincreasesitssizewhenitsassociatedcontrolis
checked.Wecanimprovethis,though,byusingthe::beforepseudo-elementwith
ourlabelelementtoinjectacustomcontrol:
css/chapter1/selectors-input.css (excerpt)
[type=radio] { opacity: 0; }[type=radio] + label::before {
background: #fff;
content: '';
display: inline-block;
border: 1px solid #444;
height: 1.2rem;
margin-right: 1em;
vertical-align: middle;
width: 1.2rem;
}[type=radio]:checked + label::before {
background: #4caf50;
}ThisgivesusthecustomizedcontrolsyouseeinFigure1.49.
Selectors 65