Benutzerdefinierte Optionsfelder - CSS-Tricks

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 verweist nicht auf ein bestimmtes Element, sondern dient lediglich dazu, zu verhindern, dass Browser die späteren Selektoren implementieren, wenn dies nicht verstanden wird (da die meisten Browser den gesamten Selektor löschen, wenn ein Teil davon ausfällt).