Gunnar Bittersmann: label for

Beitrag lesen

@@Linuchs:

nuqneH

Bleibt die Frage, ob man die Winz-Kästchen vergrößern kann.

Mit width und height kannst du die Box für Radiobutton/Checkbox (den clickbaren Bereich) vergrößern, ohne dass sich allerdings das Symbol selbst vergrößert.

Das kannst du mit transform: scale() erreichen; damit wird die browsereigene Pixel(!)grafik vergrößert, was insbesondere bei den runden Radiobuttons richtig blöd aussieht.

Bliebe nur, Radiobuttons/Checkboxen visuell zu verstecken und deren Zustand durch eigene Symbole in den Labels anzuzeigen:

[type=…] + label::before {content:}  
[type=…]:checked + label::before {content:}

Entweder Zeichen

⭕ U+2B55
◉ U+25C9

◻ U+25FB
☑ U+2611

oder Grafiken, vorzugsweise SVG.

Wenn da nicht der WebKit Adjacent/General Sibling & Pseudo Class Bug wäre …

Qapla'

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)