Šeit atlasītāji ir specifiski Wufoo marķējumam, taču darba jēdzieni var darboties jebkurā formā. Kopējā ideja ir tāda, ka noklusējuma radiopogas un izvēles rūtiņas padarāt neredzamas, to necaurredzamību iestatot uz nulles, un aizstājat ar grafiku. Pēc tam izmantojiet selektoru: pārbaudīts, lai mainītu grafiku starp to pārbaudīto un nepārbaudīto versiju.
/* Hide the original radios and checkboxes (but still accessible) :not(#foo) > is a rule filter to block browsers that don't support that selector from applying rules they shouldn't */ li:not(#foo) > fieldset > div > span > input(type='radio'), li:not(#foo) > fieldset > div > span > input(type='checkbox') ( /* Hide the input, but have it still be clickable */ opacity: 0; float: left; width: 18px; ) li:not(#foo) > fieldset > div > span > input(type='radio') + label, li:not(#foo) > fieldset > div > span > input(type='checkbox') + label ( margin: 0; clear: none; /* Left padding makes room for image */ padding: 5px 0 4px 24px; /* Make look clickable because they are */ cursor: pointer; background: url(off.png.webp) left center no-repeat; ) /* Change from unchecked to checked graphic */ li:not(#foo) > fieldset > div > span > input(type='radio'):checked + label ( background-image: url(radio.png.webp); ) li:not(#foo) > fieldset > div > span > input(type='checkbox'):checked + label ( background-image: url(check.png.webp); )