So passen Sie Checkboxen 2019 (einfach) nur mit CSS an

Das Stylen eines Kontrollkästchens ist etwas, das ich jedes Mal nachschaue, wenn ich es tun muss. Ich hoffe immer, dass ich endlich in der Lage bin, die (mal ehrlich) hässlichen Standard-HTML-Felder mit CSS zu gestalten. Das ist immer noch nicht der Fall.

Ich habe mir also meine eigene Standardmethode ausgedacht, damit ich sie nicht jedes Mal neu programmieren muss. Ich habe mich auch entschlossen, es mit Ihnen zu teilen, in der Hoffnung, dass es Ihnen ein wenig Zeit und Frustration erspart.

Frau beißt Bleistift beim Sitzen auf einem Stuhl vor einem Computer während des Tages (Foto von JESHOOTS.COM auf Unsplash)

Mit dieser Methode können Sie auf einfache Weise Farben und die Form des Felds (oder des Kreises, wenn Sie möchten) anpassen und sogar Symbole als Häkchen verwenden.

Da Sie möglicherweise hier sind, weil Sie bereits frustriert sind (und ohnehin niemand Intros liest), sollten wir uns darum kümmern!

Setup: HTML

In diesem Beispiel verwende ich zwei Kontrollkästchen. Eine für Schokolade und eine für Vanille. Im Folgenden finden Sie das HTML-Layout und wie das Rendern der Seite aussieht (aktiviert und deaktiviert).

Zwei Kontrollkästchen; Eine nicht mit einem schwarzen Kästchen und einem Etikett aus Schokolade markiert, die andere mit einem schwarzen Rand, einem schwarzen Häkchen und einem weißen Hintergrund mit einem Etikett aus Vanille markiert

Die Eingabe und beide Felder werden in das Etikett eingeschlossen, sodass das Kontrollkästchen aktiviert ist, wenn Sie auf den Text klicken. Die Eingabe ist das Standard-HTML-Kontrollkästchen, das wir nicht ignorieren oder anpassen können, aber mit CSS ausblenden können. (Mehr dazu in einer Minute.)

Die erste Zeitspanne ist unser Kontrollkästchen "Stand-In" (das, das wir anpassen werden).

Der zweite Bereich ist unser Etikettentext. Wir machen das so, damit wir es einfach stylen können.

Ok, jetzt zum Stylen ...

Setup: CSS

Um dies zu vereinfachen, habe ich die Schritte im Code beschriftet und sie einer der folgenden Erklärungen zugeordnet:

Schritt 1 - Machen Sie die Standardeinstellung unsichtbar

Darauf beziehe ich mich oben. Wir nehmen das hässliche Standard-Kontrollkästchen und setzen es auf Deckkraft 0, um es funktionsfähig, aber unsichtbar zu machen. Wir möchten auch, dass es keinen Platz im Layout einnimmt. Setzen Sie die Position auf "Absolut".

Schritt 2 - Aktivieren Sie das neue Kontrollkästchen

An dieser Stelle gestalten wir das neue Feld, während es deaktiviert ist.

Mögliche Anpassungen für das Kontrollkästchen:

  • Hintergrundfarbe - Hiermit wird die Farbe des Felds erstellt (im obigen Beispiel wurde Schwarz verwendet). Transparente Hintergründe mit nur einer Randeinstellung sind auch gut.
  • Form - Feld, Feld mit abgerundeten Ecken oder Kreis (abhängig davon, wie Sie den Rahmenradius festlegen). Stellen Sie außerdem sicher, dass Sie während dieses Schritts den Rahmen so einstellen, dass Ihr Kontrollkästchen beim späteren Wechsel in den aktivierten Zustand nicht "abprallt".
  • Größe - bestimmt durch Höhe und Breite

Schritt 3 - Führen Sie die neue Prüfung im deaktivierten Zustand durch

Jetzt entscheiden wir, wie unser Häkchen aussehen soll, machen es jedoch mit Deckkraft wieder unsichtbar, da es sich noch im deaktivierten Zustand befindet. Wir verwenden Emojis im Inhaltswert und ändern die Farbe einfach durch Festlegen der Schriftfarbe.

Mögliche Anpassungen für das Häkchen:

  • Einfach - Für einfache Optionen ist diese Site eine gute Referenz für die Grundlagen. Alles, was Sie tun müssen, ist, das von der Site gewünschte Symbol zu kopieren und in die Klammer des Inhalts in Ihrem CSS-Stylesheet einzufügen. Ich habe ein einfaches Häkchen für das Beispiel verwendet, aber Sie können auch gehen ...
  • Wild - Channel Web Bos und wählen Sie Dinge wie Tacos. Diese Website hat alles, was Sie brauchen, um Emoji wild zu machen. Das Internet ist Ihre Auster.

Schritt 4 - Aktivieren Sie das neue Kontrollkästchen im aktivierten Zustand

Hier ändern wir, wie das Kästchen aussehen soll (denken Sie daran, das Kästchen und nicht das Häkchen), wenn das Element markiert ist.

Im obigen Beispiel habe ich Weiß verwendet, um den Standardhintergrund der Seite anzupassen. Aber Sie können transparent, Peachpuff (es ist eine Sache) usw.

Für eine einfache Designidee, die großartig aussieht, machen Sie den Boxhintergrund transparent und lassen Sie das Kontrollkästchen mit der Boxhintergrundfarbe aus dem deaktivierten Zustand übereinstimmen.

Aber auch hier kann man Tacos machen, sooooo…

Schritt 5 - Setzen Sie das neue Häkchen im aktivierten Zustand

Hier ändern wir das Design des Häkchens, aber auch, wo es sich innerhalb des Kontrollkästchens befindet. Dies ist wichtig, da verschiedene Emojis unterschiedliche Größen haben, ebenso wie Ihre Kontrollkästchen. Machen Sie diese Position also relativ und passen Sie dann Ihre linken und oberen Eigenschaften an, damit Sie das Häkchen an der gewünschten Stelle im Feld positionieren können.

Das ist es!

Ein vollständiges Codebeispiel finden Sie hier.

Bis zum nächsten Mal viel Glück und viel Spaß! (Und Tacos essen !!!)