🎨 Das optimale Styling für deine Radio-Buttons und Checkboxen

Eine individuelle Formatierung für Checkboxen und Radio-Buttons in CSS erstellen

Wenn du diesen Artikel gefunden hast, wirst du ebenfalls mit den Standard-Formatierungen des Browsers unzufrieden sein. Die Browser-Eigenen Checkboxen und Radio-Buttons sind nicht gerade das, was Webseiten-Besucher als "schön" bezeichnen.

Mir geht das genauso. Für Codepalm habe ich deshalb eine CSS-Formatierung erstellt, die meine Checkboxen und Radio-Buttons in einer ansehnlichen Formatierung ausgibt.

Ich möchte dir diesen einfachen Weg zeigen, damit du deine Checkbox- und Radio-Elemente für alle Browser vereinheitlichen und an den Stil Deiner Webseite anpassen kannst.

Eine Checkbox in CSS Formatieren

Kurz gesagt: Die CSS-Formatierung blendet die eigentliche Checkbox aus, damit ein FontAwesome-Icon oder ein individuelles Bild durch das CSS Pseudo-Element :after dargestellt werden kann.

Der Selektor :checked hilft bei der Darstellung, indem er den Stilen mitteilt, ob eine Checkbox aktiv ist.

Das HTML-Grundgerüst definieren

Checkboxen bestehen normalerweise aus zwei wichtigen Elementen: Das Input-Feld und ein Label.

Durch das Platzieren eines HTML-Attributs "for" im <label>-Tag kann der Status der Checkbox mit einem Klick geändert werden. Dazu benötigt man kein JavaScript.

Um dem Label beizubringen, zu welchem Element er gehört, wird das Attribut "for" gleich der "id" der Checkbox gesetzt. Der Browser kümmert sich schon automatisch um den Klick des Checkbox-Elements durch das Label.

<input type="checkbox" id="checkbox_1" name="checkbox_1" value="Checkbox Label">
<label for="checkbox_1">Checkbox Label</label>

Das Attribut "name" der Checkbox muss nicht gleich der ID sein. Durch den Namen kann ein PHP-Algorithmus den Wert auslesen. Das ist wichtig, wenn man ein Formular erstellen möchte.

Erstellung der Checkbox-Formatierung

Wie bereits erwähnt, wird die eigentliche Checkbox versteckt. Das geschieht durch die CSS-Formatierung "display:none". Optional könnte man die Formatierungen "opacity:0" und "visibility:hidden" setzen, wenn man ganz sicher gehen will, dass das Element versteckt wird.

Als nächstes wird ein :after-Element an das Label geheftet. Das wird die Darstellung deiner individuellen Checkbox.

Achte darauf, dass du ebenfalls ein "content:' '" verwendest, falls du dich dazu entscheiden solltest, kein FontAwesome zu verwenden. Ohne diese Angabe wird deine Checkbox nicht dargestellt, auch wenn du ein Background-Image verwendest.

Ich verwende FontAwesome sehr gerne, für die verschiedensten Elemente. Ich habe es zum Beispiel auch für die YouTube 2-Klick-Lösung verwendet.

Die Bibliothek ist sehr einfach zu integrieren und es gibt sehr viele und vor allem schöne Icons, die man für sein Web-Projekt kostenlos verwenden kann.

input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label {
	margin-left: 1.4em;
	position: relative;
	cursor: pointer;
}
input[type="checkbox"] + label:after {
	left: -1.2em;
	color: #000;
	display: inline-block;
	position: absolute;
	right: -1.2em;
	top: -.1em;
	width: .8em;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.6em;
	content: '\f096';
	font-family: 'FontAwesome';
}
input[type="checkbox"]:checked + label:after {
	content: '\f046';
}

Je nach deinen globalen Formatierungen musst du gegebenenfalls die Schriftgröße, Abstände und Ausrichtungen anpassen. Das sind alles Eigenschaften, die du im Element input[type="checkbox"] + label:after findest.

Das war es auch schon! Wenn du ein Bild, statt einem FontAwesome-Icon für die individuelle Checkbox verwenden möchtest, kannst du das als background-image in den Block input[type="checkbox"] + label:after platzieren.

Einen individuellen Radio-Button erstellen

Die gleiche Formatierung können wir auch auf Radio-Buttons anwenden. Dazu müssen wir nur ein paar Kleinigkeiten an den CSS-Regeln vornehmen. Zuerst kümmern wir uns aber um die HTML-Struktur des Radio-Buttons.

Die Struktur des individuellen Radio-Buttons

Ein Radio-Button kommt selten allein. Sie wurden entwickelt, um eine bestimmte Auswahl aus mehreren Möglichkeiten zu wählen.

Die Gruppe der Radio-Buttons wird über das Attribut name definiert. Ich verwende der Einfachheit halber den Namen "radio_group". Du kannst natürlich in deinen verwenden, was du möchtest.

Daneben ist die Angabe einer ID essentiell, um den Radio-Button mit dem Attribut "for" eines Labels anzusprechen. Also genauso wie bei der Checkbox.

Um in einem PHP-Skript zu erfahren, welches Radio-Element vom Benutzer ausgewählt wurde, sollte noch ein Attribut "value" gesetzt werden. Die Value wird nicht dargestellt, sie wird nur für die Identifikation verwendet.

Radio Button 1

Radio Button 2

Sieht unserer Checkbox schon sehr ähnlich, oder was denkst du?

Die Formatierung des individuellen Radio-Buttons

Kommen wir nun zur Formatierung mit CSS. Wie schon angedeutet, ist das nur eine Abwandlung der vorhandenen Checkbox.

input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
  position: relative;
  cursor: pointer;
}
input[type="radio"] + label:before {
  left: -1.2em;
    color: #000;
    display: inline-block;
    position: absolute;
    right: -1.2em;
    top: -.3em;
    width: .8em;
    text-align: left;
    font-size: 1.2em;
    line-height: 1.6em;
    content: '\f10c';
    font-family: 'FontAwesome';
}
input[type="radio"]:checked + label:before {
  content: "\f058";
}

Wie die Checkbox auch verwendet ein Radio-Button den Selektor ":checked", um festzustellen ob er aktiv ist.

Statt den eckigen Häkchen-Boxen von FontAwesome verwende ich die runden. Das sieht mehr nach der gewohnten Struktur eines Radio-Buttons aus.

Wenn du Elemente mit zu großen Unterschieden erstellst, wird sich der Benutzer extrem schwer tun deine Elemente zu verwenden. Im schlimmsten Fall wird er deine Seite verlassen, weil er nicht damit zurecht kommt.

Vorschau der individuellen Checkboxen und Radio-Buttons

Damit du sehen kannst, wie das Ergebnis bei dir aussehen kann, habe ich die Darstellung auf Codepen vorbereitet.

Schau dir auch die Formatierung für die deaktivierten Checkboxen in Codepen an. In manchen Fällen möchte man Auswahlmöglichkeiten in Abhängigkeit von anderen Feldern ein- oder ausblenden. Durch eine sinnvolle Formatierung versteht der Benutzer sofort, dass er etwas nicht auswählen kann.

See the Pen Einfache Cutsom FontAwesome Checkbox by Codepalm (@Codepalm) on CodePen.

Hast du den Code auf deiner Webseite eingefügt? Teile deine Meinung mit den anderen.