Alternativer blir gitt til brukeren når flere verdier av et enkelt element eksisterer, hvor brukere kan velge et alternativ i henhold til deres preferanser. Den eksisterer i forskjellige former, for eksempel en avkrysningsrute, rullegardinmeny og alternativknapp. Mer spesifikt gir rullegardinmenyen forhåndsdefinerte lister over alternativer som lar brukeren velge en.

Denne håndboken vil forklare prosedyren for å endre fargen på det valgte alternativet. For dette vil vi først lage en rullegardinmeny og stil den ved hjelp av CSS og deretter endre den valgte alternativfargen.

La oss komme i gang!

Hvordan lage rullegardinmeny ved hjelp av HTML & CSS?

I HTML kan du opprette en rullegardinmeny ved å bruke "”,“”Og“”Tagger. For å forstå tydeligere, la oss flytte til syntaksen i rullegardinmenyen.

Syntaks

Her er syntaksen til rullegardinmenyen:

Tekst

valg 1
Alternativ2
..
OPTIONN

La oss forklare HTML -taggene som brukes i syntaks ovenfor:

• : Det brukes til å spesifisere det forkortede alternativet i tekstskjema.
• : Dette elementet gjør det mulig for brukeren å velge et element fra en liste.
• : Den brukes til å gi alternativer for rullegardinmenyen.

Her presenterer vi et praktisk eksempel for å forklare syntaks ovenfor.

Trinn 1: Opprett en rullegardinmeny

For det første vil vi lage en og legge til en overskrift ved hjelp av

stikkord. For å legge til en rullegardinmeny inni den, bruker vi en etikettmerke og legger til “Velg et land”Som etiketten. Etter det vil vi bruke taggen for å gjøre alternativer deilige for brukeren og tilordne alternativverdiene med "" stikkord.

Html

Linux

Velg et land:


Tyskland
Iran
Tyrkia
India
Kina

Merk: Vi har brukt “Skjult valgt" for å spesifisere "-Velg et alternativ-”Som standardalternativ. Men når brukeren velger en av dem, vil den være skjult.

Heretter vil vi gå til CSS og style det.

Trinn 2: Rullegardinmenyen for stil ved hjelp av CSS

Vi vil bruke “div”For å få tilgang til den opprettede beholderen og angi bakgrunnsfargen på div som“RGB (191, 207, 235)”. Vi vil også sette høyden på div, skriftstørrelse på teksten og fargen på teksten som "150px”,“x-stor”, Og“RGB (2, 0, 0)”, Henholdsvis. Deretter vil vi sette grensen til Div som “5px”,“ridge”, Og“RGB (108, 75, 209)”.

CSS

div
bakgrunnsfarge: RGB (191, 207, 235);
Høyde: 150px;
Font-størrelse: X-Large;
Farge: RGB (2, 0, 0);
Border: 5px Ridge RGB (108, 75, 209);

Nå vil vi style rullegardinmenyen og angi bakgrunnsfargen på menyen som "RGB (194, 222, 209)”Og grensen til menyen som“3px”,“fast”, Og“RGB (84, 73, 116)”. Etter det vil vi stille inn menyens bredde, høyde og skriftstørrelse som "300px”,“30px”Og“stor”, Henholdsvis:

plukke ut
Bakgrunn: RGB (194, 222, 209);
Grense: 3px solid RGB (84, 73, 116);
Bredde: 300px;
Høyde: 30px;
Font-størrelse: stor;

Som du kan se fra utdataene, opprettes rullegardinmenyen og stylet vellykket ved hjelp av HTML og CSS:

I output ovenfor, kan det sees at rullegardinmenyen opprettes, og den lar deg velge et hvilket som helst alternativ i henhold til dine preferanser. Vi flytter til neste avsnitt, hvor vi vil endre den valgte alternativfargen ved hjelp av CSS.

Hvordan endre fargen på valgt alternativ ved hjelp av CSS?

For å endre den valgte alternativfargen på menyen, ":krysset av”Selector of CSS brukes. : Sjekket er et pseudoklasse-element som bare kan knyttes til inngangstypeelementer, for eksempel "alternativ”,“avkrysningsrute”, Og“radio knapper”. Det brukes hovedsakelig til å endre oppførselen til den valgte verdien av disse elementene.

Syntaks

Syntaksen til: sjekket er:

element_name: sjekket
CSS -erklæringer;

I CSS -erklæringer kan du skrive koden for den valgte verdien av alternativet, avkrysningsruten og radio.

Gå nå til menyen og endre fargen på det valgte alternativet ved hjelp av: Sjekket velgeren. For å gjøre det, vil vi bruke “alternativ”For å få tilgang til alternativene som er opprettet i menyen og“:krysset av”Pseudoklasse til det valgte menyalternativet. Det tillater å endre oppførselen til det valgte alternativet. Deretter vil vi sette fargen på det valgte alternativet som "RGB (246, 250, 0)”Og bakgrunnen for det valgte alternativet som“RGB (5, 26, 1)”:

Alternativ: sjekket
Farge: RGB (246, 250, 0);
bakgrunnsfarge: RGB (5, 26, 1);

Som du kan se i følgende utgang, endres bakgrunnen og valgte alternativfarge:

Vi har forklart metoden for å endre den valgte alternativfargen ved hjelp av CSS.

Konklusjon

“:krysset av”Valg av pseudoklasse brukes til å endre den valgte alternativfargen. Det: sjekket brukes sammen med "alternativ”Av rullegardinmenyen, og etter det kan du angi fargen på det valgte alternativet. Denne håndboken forklarte metoden for å lage og style rullegardinmenyen og demonstrerte deretter prosedyren for å endre den valgte alternativfargen ved hjelp av CSS.