Radijski gumbi po meri - CSS-triki

Anonim
#foo:checked::before, input(type="checkbox") ( position:absolute; clip: rect(0,0,0,0); clip: rect(0 0 0 0); ) #foo:checked, input(type="checkbox") + label::before ( content: url('checkbox.png.webp'); ) input(type="checkbox"):checked + label::before ( content: url('checkbox-checked.png.webp'); )

#foo se ne sklicuje na noben določen element, ampak je zgolj zato, da brskalnikom prepreči izvajanje poznejših izbirnikov, če tega ne razume (saj bo večina brskalnikov spustila celoten izbirnik, če kateri koli njegov del odpove).