Hvordan style bootstrap tilpasset avkrysningsrute

Et populært CSS-rammeoppstart lar utviklere enkelt og raskt lage mobilklare og responsive webapplikasjoner. Den har hundrevis av CSS forhåndsdesignede klasser. Alt du trenger å gjøre er å legge den nødvendige klassen til det aktuelle elementet. For å spesifisere tilpassede stiler til elementer, kan CSS imidlertid brukes.

Denne oppskrivningen vil dekke:

• Hva er HTML “” -elementet?
• Hvordan style bootstrap tilpasset avkrysningsrute?

Hva er HTML “” -elementet?

I HTML, “”Element med typen”avkrysningsrute”Oppretter en avkrysningsrute på websiden. Dessuten tillater avkrysningsruter mer enn en avkrysningsrute om gangen.

Eksempel

La oss se hvordan standard avkrysningsruten ser ut mot hovedtemaet i dette innlegget. For å gjøre det, legg til “”Element med bildeteksten og spesifiser“”Element med typen”avkrysningsrute”Og attributtet“krysset av”. “krysset av”Attributt med verdien”krysset av”Brukes til å merke av i boksen som standard:

Standard stil for avkrysningsruten

Produksjon

Hvordan style bootstrap tilpasset avkrysningsrute?

For å lage den tilpassede avkrysningsruten, kan du prøve trinnene som er nevnt nedenfor:

Trinn 1: Opprett en HTML -fil

Opprett først en HTML -fil ved å følge følgende instruksjoner:

• Legg til en "”Element med“P-4”Og“ Container-Fluid ”-klasser.
• Deretter spesifiser overskriften ved å bruke "

  ”Element.

• Legg til tre “”Elementer og tilordne dem klassen“Tilpasset sjekk”.
• Inne i "”Elementer, legg til“”Element med“type”Attributtverdi”avkrysningsrute”. Bare den første inngangen må være assosiert med "krysset av" Egenskap.
• Til slutt, nevn "”Element for hake -merket.

Html

Velg menyen

Pizza



Burger



Pommes frites

Trinnene nedenfor må implementeres i CSS -delen.

Trinn 2: Skjul standard avkrysningsruten

Når vi trenger å lage en tilpasset avkrysningsrute, er det nødvendig å skjule den. For å gjøre det, få tilgang til “Tilpasset sjekk”Klasse og bruk stilene på“”Elementer:

.Tilpasset sjekkinngang
Posisjon: Absolutt;
Opacitet: 0;

Her:

• “posisjon" med "Absolutt”Verdien angir elementets posisjon i forhold til overordnet element.
• “Opacitet”Med verdien”0”Skjuler“”Elementer.

Trinn 3: Style "Custom-Check" -klassen

.tilpasset sjekk
Font-størrelse: 22px;
Posisjon: relativ;
Display: Block;
Padding-venstre: 35px;
Markør: peker;
Margin-Bottom: 12px;

Forklaringen på de ovennevnte egenskapene er diskutert nedenfor:

• “skriftstørrelse”Eiendom setter elementets skriftstørrelse.
• “posisjon" med "slektning”Verdien justerer elementets posisjon som tilsvarer dens nåværende posisjon.
• “vise" med "blokkere”Verdien gir full bredde til etiketten.
• “Padding-venstre”Legger til litt plass til venstre for elementets innhold.
• “markør”Angir musepekerens stil.
• “marginbunn”Legger plass til elementets bunn.

Trinn 4: Opprett en tilpasset avkrysningsrute

For å lage den tilpassede avkrysningsruten, legg til følgende CSS -egenskaper:

.hake
Posisjon: Absolutt;
Høyde: 27px;
Bredde: 27px;
Topp: 0;
Venstre: 0;
bakgrunnsfarge: RGB (233, 233, 233);
Border-Radius: 10px;

Her:

• “høyde ”og“ bredde”Egenskaper setter elementets størrelse.
• “topp "og" venstre "med" 0”Verdier spesifiserer ingen plass øverst og venstre for elementet.
• “bakgrunnsfarge”Bestemmer elementets bakgrunnsfarge.
• “Border-Radius”Runder elementets hjørner.

Det kan observeres at de tilpassede avkrysningsrutene er opprettet med hell:

Trinn 5: Style avmerkingsboksen når du er avkjørt

De nedenfor CSS -egenskapene implementeres i avkrysningsruten når den er sjekket:

.Tilpasset sjekkinngang: Sjekket ~.hake
Bakgrunnsfarge: #6202CF;
Border-Radius: 5px;

Så langt er avmerkingsboksene stylet som vist i GIF nedenfor:

La oss nå opprette merket i seksjonene nedenfor.

Trinn 6: Lag hake merket

For å skjule sjekkmerket når det ikke er merket av, implementer egenskapene som er nevnt nedenfor:

.Sjekk: etter
innhold: "";
Display: Ingen;
Posisjon: Absolutt;

“.Sjekk: etter”Er nevnt for å få tilgang til klassen“sjekkmerket ”og“: etter”Er en pseudoklasse, brukt til å implementere stiler etter innholdet:

• “innhold”Angir det innsatte innholdet.
• “vise”Med verdien”ingen”Skjuler sjekkmerket.

Trinn 7: Vis merket når du er sjekket

Når brukeren sjekker avkrysningsruten, må den vise merket. For å gjøre det, blir sjekkmerket brukt med CSS “vise”Eiendom med verdien”blokkere”:

.Tilpasset sjekkinngang: Sjekket ~.Sjekk: etter
Display: Block;

Trinn 8: Style The Checkmark

Her er CSS -egenskapene for å lage flåttmerket:

.Tilpasset sjekk .Sjekk: etter
Venstre: 8px;
Topp: 5px;
Bredde: 9px;
Høyde: 14px;
grensen: solid hvit;
Borderbredde: 0 3px 3px 0;
Transform: roter (45deg);

I henhold til den gitte koden:

• “Venstre ”og“ Topp”Spesifiser plassen på venstre og toppsiden av flåttmerket.
• “bredde ”og“ høyde”Juster flåttmerkets område.
• “grense”Eiendom skaper hake -merket.
• “grensebredde”Eiendom spesifiserer topp, høyre, bunn og venstre grenser. Her er bare høyre og bunnegenskaper spesifisert.
• “forvandle”Eiendom med verdien”roter (45deg)”Roterer flåttmerket på 45 grader.

Produksjon

Det handlet om hvordan du kan style en tilpasset avkrysningsrute ved hjelp av Bootstrap.

Konklusjon

For å style Bootstrap Custom CheckBox, Opprett først en HTML -side. Legg til "”Og“”Med typen“avkrysningsrute”Elementer. Deretter brukes flere CSS -egenskaper til å style dem. Mer spesifikt, for å lage flåttmerket, CSS “grense ”og“ grensebredde”Egenskaper brukes. Dette innlegget har forklart hvordan du kan style en tilpasset avkrysningsrute i Bootstrap.