Radio-Buttons und Checkboxen per CSS gestalten
Radiobuttons und Checkboxen beliebig gestalten. Damit eröffnen sich neue Möglichkeiten für die Gestaltung, ohne dass dazu Tricks notwendig wären. Browserunterstützung: Mozilla Firefox 53, Google Chrome und Microsoft Edge.
![]() 16 x 16 Pixel 603 Byte |
![]() 16 x 16 Pixel 452 Byte |
![]() 30 x 30 Pixel 1.1 KB |
![]() 30 x 30 Pixel 1.1 KB |
<style> input[type="radio"] { -moz-appearance: None; -webkit-appearance: none; background: Blue; border: Solid Thin Black; } input[type="radio"]:checked { background: Red; } input[type="checkbox"] { -moz-appearance: None; -webkit-appearance: none; width: 16px; height: 16px; background-image: url(unchecked.png); background-size: 16px 16px; background-position: Center Center; border: none; outline: none; vertical-align: Middle; } input[type="checkbox"]:checked { background-image: url(checked.png); } </style> <p> <label><input type="radio" name="a"> Radio</label><br> <label><input type="radio" name="a" checked="checked"> Radio</label> </p> <p> <label><input type="checkbox"> Checkbox</label><br> <label><input type="checkbox" checked="checked"> Checkbox</label> </p>
Siehe auch: Checkboxen und Radiobuttons farblich anpassen