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.





checked.png
16 x 16 Pixel
603 Byte
unchecked.png
16 x 16 Pixel
452 Byte
checked2.png
30 x 30 Pixel
1.1 KB
unchecked2.png
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>