Hvordan du styler nedgang i CSS
En rullegardin er en liste over alternativer som bare vises når brukeren klikker eller henger over et alternativ og velger ett eller flere alternativer fra den gitte listen. Det er mange måter å style en rullegardinliste ved å bruke forskjellige CSS -egenskaper, for eksempel farge, svev, posisjon, margin og mange flere.
Vi er her for å forklare hvordan du kan style en rullegardinmeny ved hjelp av CSS. For dette formålet vil vi først forklare prosessen med å lage en klikkbar rullegardinmeny, og etter det vil vi style nedslaget i CSS.
Hvordan lage en rullegardinmeny i CSS?
Du kan opprette en rullegardinmeny i HTML ved å bruke og tagger. For å forstå tydeligere, la oss flytte til syntaksen i rullegardinmenyen.
Syntaks
Her er syntaks for rullegardinmenyen:
La oss gradvis forklare HTML -kodene som brukes i kodeblokken ovenfor:
- merkelapp: Det brukes til å spesifisere det forkortede alternativet i tekstskjema.
- plukke ut: Dette elementet gjør det mulig for brukeren å velge et element fra en liste.
- alternativ: Det brukes til å gi alternativer for rullegardinmenyen.
Her presenterer vi et praktisk eksempel for å forklare poenget.
Eksempel
I det gitte eksemplet vil vi lage en og legge til en rullegardinmeny inni den. Etter det vil vi merke menyen ved å bruke "”Merk og tilordne alternativverdiene med“" stikkord. Vi har lagt til elementene i taggen for å vise menyen midt på skjermen:
Linux hint
velg name = "velg">
Etter å ha utført den medfølgende koden, vises følgende rullegardinmenying:
Som du ser har den opprettede rullegardinmenyen et enkelt utseende. Du kan imidlertid style det ved å bruke forskjellige CSS -egenskaper.
Hvordan du styler nedgang i CSS?
I CSS vil vi style rullegardinmenyen for valg av valg som følger.
Trinn 1: Stiloverskrift
La oss endre overskriftens farge ved å bruke "farge”Eiendom:
H1
Farge: grønn;
Her har vi tildelt en “grønn”Farge til overskriften.
Trinn 2: Endre markørtype
Endre markørtypen ved å bruke “markør”Eiendom. Som et resultat, når brukeren henger over menylisten, vil formen på markøren endre seg til håndpekeren:
#plukke ut
Markør: peker;
Trinn 3: Rullegardinmenyen for stil
Her vil vi angi attributtene til rullegardinmenyen ved å tilordne den en bakgrunnsfarge “Lightseagreen”, Border“1px solid svart”, Bredde”300px”, Og høyde”30px”:
plukke ut
Bakgrunn: Lightseagreen;
Grense: 1px solid svart;
Bredde: 300px;
Høyde: 30px;
Etter å ha fullført alle disse trinnene, utfør HTML -filen og se på resultatet:
Utgangen viser at utseendet til rullegardinmenyen vår er stylet.
Konklusjon
CSS tilbyr flere egenskaper som kan brukes til å style rullegardinmenyene. For eksempel brukes grensen, fargen og bakgrunnsegenskapene til å style menyens grense, farge og bakgrunnsfarge. Denne artikkelen forklarte metoden for å style rullegardinmenyen og hvordan du tilordner forskjellige attributter til den.