HTML gir de forskjellige inngangsparametrene for å sette inn verdiene, inkludert knapper, tekstfelt, avmerkingsbokser, bestilte/uordnede lister og mange flere. Mer spesifikt, hvis du oppretter et nettsted og vil at besøkende skal kunne velge flere elementer fra en meny, er det å legge til en avkrysningsrute et godt valg.

Avmerkingsboksene lar brukere velge mer enn ett alternativ fra menyen.

Denne opplæringen vil oppgi:

• Hvordan lage en avkrysningsrute med HTML?
• Hvordan style avmerkingsbokser med CSS?

Hvordan lage en avkrysningsrute med HTML?

Følg de gitte trinnene for å lage en avkrysningsrute med HTML.

Trinn 1: Legg til overskrift

Inkluderer en overskrift på HTML -siden ved hjelp av

stikkord. For eksempel har vi benyttet oss av nivå 1 overskriftskoder "

”Og la til teksten som“Beste opplæringsnettsteder”:

Beste opplæringsnettsteder

Produksjon

Trinn 2: Opprett en avkrysningsrute

Legg nå til en etikett sammen med klasseattributtet og plasser etikettnavnet mellom tags. Etter det, definer et element med typen "avkrysningsrute”For å lage en avkrysningsrute med etikettnavn:

Linuxhint

Som du kan se, er avkrysningsruten opprettet med hell med bildeteksten “Linuxhint”:

For å legge til et annet avkrysningsrute -alternativ, oppretter du igjen en ny etikett, legg inn etikettnavnet mellom "”Tagger, og sett inn“”Element med type”avkrysningsrute”:

TSL -innholdsskapere

Det kan observeres at flere avmerkingsbokser er lagt til på websiden:

La oss gå mot neste avsnitt for å style avkrysningsruten.

Hvordan style avkrysningsruten med CSS?

Følg de gitte instruksjonene for å style avmerkingsboksen med CSS.

Trinn 1: Bruk styling i avkrysningsruten

Bruk følgende egenskaper på “.hoved-”Klasse som brukes til å få tilgang til elementet:

• Legg til skjermegenskapen ved å spesifisere verdien “blokkere”Å behandle et element som en blokk.
• Sett posisjonseiendommen som “slektning”For å endre elementet i forhold til seg selv og overordnet element.
• Sett polstring-venstre med verdien “45px”For å sette bredden på polstringsområdet til venstre og marginbunn med“15px”Verdi for å skape plass rundt elementene utenfor eventuelle definerte grenser.
• Angi skriftstørrelsen på etiketten:

.hoved
Display: Block; Font-size: 20px;
Posisjon: relativ;
Margin-Bottom: 15px;
Markør: peker; padding-venstre: 45px;

Trinn 2: Juster avkrysningsruten Posisjon

Sett noen CSS -egenskaper på “.Linuxhint”Klasse for å justere avmerkingsboksen, som følger:

• Sett stillingen som "Absolutt”.
• Sett høyden og bredden som “25px”
• Angi bakgrunnsfargen som "svart”:

.LinuxHint
Posisjon: absolutt; bakgrunnsfarge: svart;
Topp: 0;
Venstre: 0;
Høyde: 25px;
Bredde: 25px;

Trinn 3: Angi bakgrunnsfarge når avkrysningsruten er "sjekket"

Nå brukes bakgrunnsfargede egenskaper til å angi det som vises når avkrysningsruten er merket av:

.Hovedinngang: sjekket ~ .LinuxHint
bakgrunnsfarge: RGB (231, 209, 12);

Trinn 4: Sett avkrysningsruten styling

I dette trinnet, bruk koden under levert for å angi eiendommen i avkrysningsruten. Avkrysningsruten vises i avkrysningsruten når den er avmerket og ikke vises når den ikke er merket av:

.LinuxHint: Etter
innhold: "";
Posisjon: Absolutt;
Display: Ingen;

Sett nå visningsegenskapen som en "blokkere”For å vise avkrysningsmerket når avkrysningsruten er avmerket:

.Hovedinngang: sjekket ~ .LinuxHint: Etter
Display: Block;

Til slutt, bruk transformasjon CSS -egenskapen på avkrysningsruten rektangel for å få grensen til å se ut som en "sett kryss”Form:

.hoved- .LinuxHint: Etter
Venstre: 8px;
Bunn: 5px;
Bredde: 6px;
Høyde: 12px;
Grense: Solid RGB (250, 238, 238);
Borderbredde: 0 4px 4px 0;
Transform: roter (45deg);

Produksjon

Du har lært den enkleste metoden for å style avkrysningsruten ved hjelp av CSS.

Konklusjon

For å style en avkrysningsrute ved hjelp av CSS, oppretter du først en avkrysningsrute ved hjelp av HTML. Deretter definerer du klasseattributtet i HTML -elementet og bruk CSS i avkrysningsruten. Etter det, stil avmerkingsboksene ved å bruke CSS -egenskapene i klassen, for eksempel avmerkingsboks, bakgrunnsfarge og størrelse på avkrysningsrutene ved å bruke høyden og breddeegenskapene. Dette innlegget demonstrerte metoden for styling av avkrysningsruten ved hjelp av CSS.