Buradaki seçiciler, Wufoo işaretlemesine özeldir, ancak iş yerindeki kavramlar herhangi bir biçimde işe yarayabilir. Genel fikir, opaklıklarını sıfıra ayarlayarak varsayılan radyo düğmelerini ve onay kutularını görünmez yapmanız ve bunları grafiklerle değiştirmenizdir. Ardından, grafikleri işaretli ve işaretsiz sürümleri arasında değiştirmek için: işaretli seçiciyi kullanın.
/* 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); )