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.




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.

 

Codepalm
Checkboxen und Radio-Buttons formatieren