Hvordan lage en drop-down boks Større i CSS

Selv om du ikke kan style en drop-down boksen for å se nøyaktig hvor du vil uten involvert noen Javascript, kan du endre størrelsen. Mulige endringer i den totale størrelsen inkluderer innstillingen bredden og høyden på selve boksen, ved hjelp av en større skriftstørrelse eller bruke polstring rundt teksten i boksen. Når du setter målene på boksen, er det best å la høyden alene, men du kan angi bredden for å gjøre boksen lenger. Skriftstørrelse og polstring vil gjøre høyden på rullegardin vokse til å passe teksten og ekstra mellomrom.

Bruksanvisning

1 Åpne kildekoden for websiden i en editor som Notisblokk, og finn rullegardin:

<Velg id = "mydropdown">
<Alternativ> Alternativ # 1 </ option>
<Alternativ> Alternativ # 2 </ option>
<Alternativ> Alternativ 3 </ option>
</ Velge>

Legg et ID navn til drop-down boks som vist, med mindre man allerede er til stede. Du trenger ID-navn for CSS-koden.

2 Skriv en stil regel som velger rullegardin av sin ID navn. Still "width" eiendom til bredden du ønsker for drop-down:

mydropdown {

width: 300px;
}

3 Angi skriftstørrelsen for drop-down boks i piksler:

mydropdown {

width: 300px;
font-size: 18px;
}

Høyden på drop-down boks vil utvide for å imøtekomme større skriftstørrelse.

4 Legg polstring rundt teksten i drop-down boks. Den padding vil påvirke størrelsen på rullegardin selv:

mydropdown {

width: 300px;
font-size: 18px;
padding: 10px 5px;
}

Dette polstring legger 10 piksler plass på venstre og høyre side av boksen, pluss 5 piksler plass på toppen og bunnen. Da boksen har en fast bredde, vil bredden av rullegardin seg ikke endre.

Hint

• Bruk en prosentverdi i stedet for piksler for bredden hvis du ønsker å gjøre på rullegardin bredde i forhold til størrelsen på siden. Formatet er «X%" hvor "X" er noen heltall, som starter på null.