Checkboxen und Buttons mit CSS stylen

Für das Styling von Checkboxen und Radio-Buttons gibt es im Netz eine Vielzahl von sehr gelungenen Beispielen. In fast allen Fällen muß jedoch auch das HTML angepasst werden, was bei umfangreichen Projekten recht zeitraubend werden kann.

Dies ist ein Beispiel für ein einfaches und browser-unabhängiges Styling, welches nur CSS verwendet. Es werden keine Änderungen an HTML-Templates oder JS benötigt.

input[type=checkbox] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #000;
     top: 14px;
     height: 20px;
     width: 20px;
     border: 0;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
     border: 1px solid #dfdbd8;
}
input[type=checkbox]:checked::before {
     position: absolute;
     font-size: 14px;
     left: 5px;
     top: 0;
     font-weight: 700;
     content: '\02143';
     transform: rotate(40deg);
}
input[type=radio] {
    -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #000;
     top: 14px;
     height: 20px;
     width: 20px;
     border: 0;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
     border-radius: 40px;
     border: 1px solid #dfdbd8;
}
input[type=radio]:checked::before {
     position: absolute;
     font-size: 14px;
     left: 5px;
     top: -0;
     font-weight: 700;
     content: '\02143';
     transform: rotate(40deg);
}