Ein Kontrollkästchen mit CSS gestalten

In diesem Tutorial wird eine Methode zum Stylen eines Kontrollkästchens in CSS vorgestellt.

Verwendung von CSS zur Gestaltung von Kontrollkästchen

Ein Kontrollkästchen ist ein HTML-Element, das verwendet wird, um Eingaben vom Benutzer entgegenzunehmen und wird in fast allen Websites verwendet. Da das standardmäßige Kontrollkästchen des Browsers auf jeder anderen Site gleich aussieht, warum nicht sie stylen? Obwohl es etwas kompliziert ist, sie mit Pseudo-Elementen wie :before, :after, :hover und :checked zu stylen, ist es möglich, eine Checkbox mit CSS zu stylen.

Um das Styling auf die Kontrollkästchen anzuwenden, verwenden wir nur HTML und CSS ohne zusätzliche Bibliotheken. Diese Methode funktioniert in modernen Browsern gut. Es gibt viele Ansätze, wenn es um das Styling von Checkboxen geht. Wir können diese einfachen Prinzipien befolgen, um unser Ziel zu erreichen. Wir können das standardmäßige Kontrollkästchen-Steuerelement ausblenden, das vom Browser gestylt wird und mit CSS nicht sinnvoll überschrieben werden kann. Wenn das Steuerelement ausgeblendet ist, müssen wir seinen aktivierten Status immer noch erkennen und umschalten. Wir können den aktivierten Status des Kontrollkästchens widerspiegeln, indem wir ein neues Element gestalten.

Die oben genannten Prinzipien können mit verschiedenen Methoden angewendet werden, und es gibt keinen einzigen richtigen oder falschen Ansatz. In diesem Tutorial werden wir die Checkbox zunächst in ein div-Element packen. Das bedeutet, dass wir, selbst wenn das Kontrollkästchen-Steuerelement ausgeblendet ist, seinen aktivierten Status immer noch umschalten können, indem wir auf eine beliebige Stelle innerhalb des div klicken. Dann können wir das Kontrollkästchen ausblenden und nach dem Kontrollkästchen ein neues Element hinzufügen, das wir entsprechend formatieren können. Das Element muss nach der Checkbox erscheinen, um ausgewählt und in Abhängigkeit vom Status :checked gestylt zu werden. Pseudo-Klasse in CSS wird verwendet, um ein bestimmtes Element zu stylen, das einen bestimmten Zustand des Elements definiert. Hier verwenden wir einige Pseudo-Elemente. Der Selektor :before fügt etwas vor dem Inhalt jedes ausgewählten Elements ein. Der Selektor :checked entspricht jedem geprüften <input>-Element.

In HTML befindet sich das Kontrollkästchen innerhalb des Tags <label>. Die Hauptfunktion des Elements <span> besteht darin, die Checkbox später aus CSS heraus zu referenzieren.

In CSS legt die Eigenschaft display das Anzeigeverhalten (die Art der Renderingbox) eines Elements fest. In unserem Fall ist es auf none gesetzt, wodurch das <input>-Element innerhalb des <label>-Tags, also unser Standard-Checkbox, vollständig entfernt wird. Wir haben die Eigenschaften height, width und border verwendet, um das benutzerdefinierte Kontrollkästchen zu generieren. Die CSS-Eigenschaften height und width legen die Höhe und Breite eines Elements fest. Mit der CSS-Eigenschaft border können Sie den Stil, die Breite und die Farbe des Rahmens eines Elements festlegen. Die Eigenschaft display legt das Anzeigeverhalten fest. Der Inline-Wert zeigt das Element als Inline an. Die Eigenschaft position gibt die Positionierungsarten an, die für ein Element verwendet werden, um unsere neue Checkbox zu setzen.

Das Pseudo-Element :before wird verwendet, um unseren Inhalt vor dem Element <span> einzufügen. Der Selektor :checked passt zu jedem markierten Element, d. h. wenn unser Kontrollkästchen aktiviert ist, werden neue Inhalte vor dem Element <span> eingefügt, da wir den Selektor :before verwenden. Diese unterstützen die Eigenschaft content, die das Einfügen von Unicode-Icons ermöglicht. Der Wert der CSS-Eigenschaft content:'\2714' repräsentiert ein Häkchen-Symbol.

Beispielcode:

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}