Miten muotoilen <select> -pudotusvalikon pelkällä CSS:llä?

Onko olemassa vain CSS-tapaa muotoilla <select>pudotusvalikko?

Minun on tyyliteltävä <select>-lomake niin paljon kuin mahdollista ilman JavaScriptiä. Mitä ominaisuuksia voin käyttää tähän CSS:ssä?

Tämän koodin on oltava yhteensopiva kaikkien tärkeimpien selainten kanssa:

  • 6, 7 ja 8.
  • Firefox
  • Safari

Tiedän, että voin tehdä sen JavaScriptillä: Esimerkki.

Enkä puhu pelkästä muotoilusta. Haluan tietää, mitä parasta voimme tehdä vain CSS:llä.

Löysin vastaavia kysymyksiä Stack Overflow'sta.

Ja tämän Doctype.com-sivustolta.

Peter Mortensen
Muokattu kysymysT55 syyskuu 2019 в 7:15
Ohjelmointi
cross-browser html css combobox skinning
T66 joulukuu 2009 в 3:33
76 näkymät

Valitse-elementtiä ja sen pudotusvalikkoa on vaikea muotoilla.

Chris Heilmannin kirjoittama style attributes for select element vahvistaa sen, mitä Ryan Dohery sanoi ensimmäisen vastauksen kommentissa:

"Select-elementti on osa käyttöjärjestelmään, ei selaimen kromiin. Siksi se on hyvin epäluotettavaa tyylitellä, eikä ole välttämättä järkevää yrittää sitä. joka tapauksessa."

Jacob Alvarez
Muokattu vastausta T00 kesäkuu 2016 в 4:41
Kommentit (0)

<select>-tagit voidaan muotoilla CSS:n avulla aivan kuten mikä tahansa muu HTML-elementti selaimessa esitetyllä HTML-sivulla. Alla on (liian yksinkertainen) esimerkki, joka sijoittaa select-elementin sivulle ja esittää vaihtoehtojen tekstin sinisenä.

Esimerkki HTML-tiedosto (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Ali Shakiba
Muokattu vastausta T66 maaliskuu 2016 в 6:49
Kommentit (3)

Kyllä. Voit tyylitellä minkä tahansa HTML-elementin sen tagin nimellä, esimerkiksi näin:

select {
  font-weight: bold;
}

Voit tietysti myös käyttää CSS-luokkaa sen tyylittelyyn, kuten minkä tahansa muun elementin:


<select class="important">
  Important Option
  Another Important Option
Paul Sweatte
Muokattu vastausta T55 lokakuu 2013 в 12:31
Kommentit (3)