Čia esantys selektoriai yra būdingi „Wufoo“ žymėjimui, tačiau darbo sąvokos gali būti bet kokios formos. Bendra idėja yra ta, kad numatytuosius radijo mygtukus ir žymimuosius langelius padarysite nematomus nustatydami jų neskaidrumą į nulį ir pakeisdami juos grafika. Tada naudokite: pažymėtą selektorių, kad pakaitinėtumėte grafiką tarp jų pažymėtų ir nepažymėtų versijų.
/* 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); )