Pemilih di sini adalah khusus untuk markup Wufoo, tetapi konsep di tempat kerja dapat berfungsi dalam bentuk apa pun. Idea keseluruhan adalah bahawa anda membuat butang radio dan kotak pilihan lalai tidak kelihatan dengan menetapkan kelegapannya menjadi sifar, dan menggantinya dengan grafik. Kemudian gunakan pemilih: diperiksa untuk menukar grafik antara versi yang dicentang dan tidak dicentang.
/* 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); )