Pemilih di sini khusus untuk markup Wufoo, tetapi konsep yang sedang bekerja dapat berfungsi untuk bentuk apa pun. Ide keseluruhannya adalah Anda membuat tombol radio default dan kotak centang tidak terlihat dengan menyetel opasitasnya ke nol, dan menggantinya dengan grafik. Kemudian gunakan: selektor yang dicentang untuk mengganti grafik antara versi yang dicentang dan versi yang 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); )