Пользовательские радиокнопки - 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 не ссылается на какой-либо конкретный элемент, он существует исключительно для того, чтобы запретить браузерам реализовать более поздние селекторы, если он этого не понимает (поскольку большинство браузеров отбрасывают весь селектор, если какая-либо его часть выходит из строя).