Các bộ chọn ở đây dành riêng cho đánh dấu Wufoo, nhưng các khái niệm tại nơi làm việc có thể hoạt động với mọi hình thức. Ý tưởng tổng thể là bạn làm cho các nút radio và hộp kiểm mặc định trở nên vô hình bằng cách đặt độ mờ của chúng thành 0 và thay thế chúng bằng đồ họa. Sau đó, sử dụng bộ chọn: đã chọn để thay thế đồ họa giữa các phiên bản đã chọn và chưa chọn của chúng.
/* 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); )
