CSS für Radio-Button und Checkbox

Nimm nen label

HTML label wendet sich nicht nur an Screenreader: Minimales CSS für das label-Tag strukturiert Formulare klarer und vergrößert den Hot Spot, den sensiblen Bereich für die Maus oder den Finger.

<label><input type="email" placeholder="Email"></label>
<label><input type="search" placeholder="Suchen" results></label>
<div class="flex">
   <label><input type="checkbox" name="color" value="Rosa"> Rosa</label>
   <label><input type="checkbox" name="color" value="Lavendel"> Lavendel</label>
   <label><input type="checkbox" name="color" value="Zitrone"> Zitrone</label>
</div>

label muss nicht unbedingt mit einem Text vor dem input-Tag stehen, sondern kann das Eingabefeld einwickeln und die maus- bzw. touch-sensible Fläche vergrößern. HTML label ersetzt auch die kleinen Checkboxen und Radio-Buttons ohne Javascript.

Das alleine macht die kleinen Buttons schon handlicher, aber dieses Verhalten kann man sich für eine größere Ausgabe von Checkboxen und Radio-Buttons zu Nutzen machen.

Klar strukturierte Eingabefelder verringern die Abneigung gegen das Ausfüllen der Eingabefelder. Anstelle von Tabellen oder div-Tags formatiert das label-Tag die Platzierung von Formularfeldern und ihrer Beschriftung.

label {display: block; padding: 1ex; }
.flex label { cursor: pointer }

display:block; verwandelt das inline-Element label in ein Block-Element mit Zeilenumbruch, padding vergrößert die Klickfläche, bei den Checkboxen zeigt der Cursor, dass man nicht auf das winzige Kästchen zielen muss.

Für die vergrößerten Check- und Radioboxen reichen ebenfalls CSS und zwei einfache Bilder: Checkbox und Radiobutton mit CSS.

#checkit2 + label span,
#checkit3 + label span {
	background-image: url(ui-checkbox-e.svg);
	vertical-align:middle;
	width: 30px; height: 30px; display: inline-block;
	margin-right: 12px; cursor: pointer;
}

#checkit2:checked + label span,
#checkit3:checked + label span {
	background-image: url(ui-checkbox-c.svg);
}

#radio2,
#radio3 {display: none}
#radio2 + label span,
#radio3 + label span {
	background-image: url(ui-radio-e.svg);
	vertical-align:middle;
	width: 30px; 
	height: 30px; 
	display: inline-block;
	margin-right: 12px; cursor: pointer;
}

#radio2:checked + label span,
#radio3:checked + label span {
	background-image: url(ui-radio-c.svg);
}