So stylen Sie das benutzerdefinierte Kontrollkästchen Bootstrap

Mit einem beliebten CSS-Framework-Bootstrap können Entwickler mobile und reaktionsschnelle Webanwendungen einfach und schnell erstellen. Es hat Hunderte von CSS-Vorentwicklungsklassen. Alles, was Sie tun müssen, ist, die erforderliche Klasse dem jeweiligen Element hinzuzufügen. Um jedoch benutzerdefinierte Stile für Elemente anzugeben, können CSS verwendet werden.

Diese Beschreibung wird abdecken:

• Was ist das HTML -Element?
• So stylen Sie das benutzerdefinierte Kontrollkästchen Bootstrap?

Was ist das HTML -Element?

In HTML die “"Element mit dem Typ"Kontrollkästchen”Erstellt ein Kontrollkästchen auf der Webseite. Darüber hinaus ermöglichen Kontrollkästchen mehr als ein Kontrollkästchen gleichzeitig überprüft.

Beispiel

Bevor wir uns auf das Hauptthema dieses Beitrags zu bewegen, sehen wir uns an, wie das Standard -Kontrollkästchen aussieht. Um dies zu tun, fügen Sie das hinzu “Element mit der Bildunterschrift und geben Sie das an “"Element mit dem Typ"Kontrollkästchen"Und das Attribut"überprüft”. Der "überprüft”Attribut mit dem Wert“überprüft”Wird verwendet, um das Kontrollkästchen standardmäßig zu überprüfen:

Standardstil der Checkbox

Ausgang

So stylen Sie das benutzerdefinierte Kontrollkästchen Bootstrap?

Probieren Sie die unten genannten Schritte aus:

Schritt 1: Erstellen Sie eine HTML -Datei

Erstellen Sie zunächst eine HTML -Datei, indem Sie die folgenden Anweisungen folgen:

• Füge hinzu ein "”Element mit dem“P-4Und "Container-Fluid" -Klassen.
• Geben Sie dann die Überschrift mit der “an

  " Element.

• Drei hinzufügen “"Elemente und zuweisen Sie ihnen die Klasse"Custom-Check”.
• Im Inneren ""Elemente, fügen Sie die" hinzu "”Element mit dem“Typ" Attributwert "Kontrollkästchen”. Nur der erste Eingang muss mit dem verbunden seinüberprüft”Attribut.
• Zuletzt erwähnen Sie die “”Element für das Scheck einen.

Html

Wählen Sie das Menü

Pizza



Burger



Pommes frittes

Die folgenden Schritte müssen im Abschnitt CSS implementiert werden.

Schritt 2: Ausblenden Sie das Standard -Kontrollkästchen

Da wir ein benutzerdefiniertes Kontrollkästchen erstellen müssen, ist es erforderlich, um es zu verbergen. Um dies zu tun, greifen Sie auf die “zu"Custom-CheckKlasse und wenden Sie die Stile auf die “anElemente:

.Benutzerdefinierte Überprüfung
Position: absolut;
Deckkraft: 0;

Hier:

• “Position" mit dem "absolutDer Wert legt die Position des Elements relativ zu seinem übergeordneten Element fest.
• “Opazität"Mit dem Wert"0”Versteckt die“Elemente.

Schritt 3: Stylen Sie die Klasse „Custom-Check“

.benutzerdefinierte Prüfung
Schriftgröße: 22px;
Position: Relativ;
Bildschirmsperre;
Padding-Links: 35px;
Cursor: Zeiger;
Randboden: 12px;

Die Erklärung der oben genannten Eigenschaften wird nachstehend erörtert:

• “SchriftgrößeEigenschaft legt die Schriftgröße des Elements fest.
• “Position" mit dem "relativDer Wert passt die Position des Elements an, die seiner aktuellen Position entspricht.
• “Anzeige" mit dem "BlockDer Wert gibt dem Etikett die volle Breite.
• “Padding-Links”Fügt etwas Platz links vom Inhalt des Elements hinzu.
• “Mauszeiger”Legt den Stil des Mauszeigers fest.
• “Randboden”Fügt Platz am Boden des Elements hinzu.

Schritt 4: Erstellen Sie ein benutzerdefiniertes Kontrollkästchen

Fügen Sie die folgenden CSS -Eigenschaften hinzu, um das benutzerdefinierte Kontrollkästchen zu erstellen:

.Häkchen
Position: absolut;
Höhe: 27px;
Breite: 27px;
Top: 0;
links: 0;
Hintergrundfarbe: RGB (233, 233, 233);
Border-Radius: 10px;

Hier:

• “Höhe und BreiteEigenschaften setzen die Größe des Elements.
• “ober ”und„ links “mit„ 0Werte geben oben und links im Element keinen Platz an.
• “Hintergrundfarbe”Bestimmt die Hintergrundfarbe des Elements.
• “Grenzradius”Rundet die Ecken des Elements ab.

Es kann beobachtet werden, dass die benutzerdefinierten Kontrollkästchen erfolgreich erstellt wurden:

Schritt 5: Stylen Sie das Kontrollkästchen beim Überprüfen

Die folgenden CSS -Eigenschaften werden im Kontrollkästchen implementiert, wenn es überprüft wird:

.Eingabe für benutzerdefinierte Überprüfung: ~ ~.Häkchen
Hintergrundfarbe: #6202CF;
Border-Radius: 5px;

Bisher werden die Kontrollkästchen wie im folgenden GIF gezeigt gestaltet:

Erstellen wir nun das Check -Mark in den folgenden Abschnitten.

Schritt 6: Erstellen Sie das Check -Mark

Um das Checkmark zu verbergen, wenn er nicht überprüft ist, implementieren Sie die unten genannten Eigenschaften:

.checkmark: nach
Inhalt: "";
Anzeige: Keine;
Position: absolut;

Der ".Checkmark: Nach"Wird erwähnt, um auf die Klasse zuzugreifen"checkmark ”und„: danach”Ist eine Pseudoklasse, die zum Implementieren von Stilen nach dem Inhalt verwendet wird:

• “Inhalt”Gibt den eingefügten Inhalt an.
• “Anzeige"Mit dem Wert"keiner”Versteckt das Checkmark.

Schritt 7: Zeigen Sie das Checkmark bei der Überprüfung an

Wenn der Benutzer das Kontrollkästchen überprüft, muss das Checkmark angezeigt werden. Dazu wird das Scheckmark mit dem CSS angewendet “Anzeige”Eigenschaft mit dem Wert“Block”:

.Eingabe für benutzerdefinierte Überprüfung: ~ ~.checkmark: nach
Bildschirmsperre;

Schritt 8: Style the Checkmark

Hier sind die CSS -Eigenschaften, um die Zeckenmarke zu erstellen:

.Custom-Check .checkmark: nach
links: 8px;
Top: 5px;
Breite: 9px;
Höhe: 14px;
Grenze: Festes Weiß;
Randbreit: 0 3px 3px 0;
Transformation: Drehen (45 Grad);

Nach dem angegebenen Code:

• “links “und„ Top”Geben Sie den Platz links und die oberen Seiten der Zeckenmarke an.
• “Breite und Höhe”Passen Sie den Bereich der Zeckenmarke an.
• “Grenze”Eigenschaft schafft die Zeckenmarke.
• “Rahmenbreite”Eigenschaft gibt die oberen, rechts, unten und linken Grenzen an. Hier werden nur die rechten und unteren Eigenschaften angegeben.
• “verwandeln”Eigenschaft mit dem Wert“drehen (45 Grad)”Dreht die Zeckenmarke bei 45 Grad.

Ausgang

Hier ging es darum, ein benutzerdefiniertes Kontrollkästchen mit Bootstrap zu stylen.

Abschluss

Erstellen Sie zunächst eine HTML -Seite. Ergänzen Sie die "" Und ""Mit dem Typ"KontrollkästchenElemente. Dann werden mehrere CSS -Eigenschaften verwendet, um sie zu stylen. Genauer gesagt, um die Zeckenmarke zu machen, das CSS “Grenze “und„ GrenzbreiteEigenschaften werden verwendet. In diesem Beitrag wurde erklärt, wie ein benutzerdefiniertes Kontrollkästchen in Bootstrap style.