Boutons radio personnalisés - Astuces CSS

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 ne fait référence à aucun élément particulier, il est là uniquement pour empêcher les navigateurs d'implémenter les derniers sélecteurs s'il ne comprend pas cela (puisque la plupart des navigateurs abandonneront le sélecteur entier si une partie de celui-ci échoue).