Hoe stijl ik een <select> dropdown met alleen CSS?

Is er een CSS-only manier om een <select> dropdown te stijlen?

Ik moet een <select> formulier zo veel mogelijk opmaken, zonder enige JavaScript. Wat zijn de eigenschappen die ik kan gebruiken om dit in CSS te doen?

Deze code moet compatibel zijn met alle grote browsers:

  • Internet Explorer 6, 7, en 8
  • Firefox
  • Safari

Ik weet dat ik het met JavaScript kan maken: Voorbeeld.

En ik'heb het niet over eenvoudige styling. Ik wil weten, wat het beste is wat we kunnen doen met alleen CSS.

Ik vond soortgelijke vragen op Stack Overflow.

En deze op Doctype.com.

Peter Mortensen
Bewerkte vraag 7de5 september 2019 в 7:15
Programmering
cross-browser html css combobox skinning
13de6 december 2009 в 3:33
76 views

Het select element en zijn dropdown functie zijn moeilijk te stylen.

style attributes for select element van Chris Heilmann bevestigt wat Ryan Dohery zei in een reactie op het eerste antwoord:

"Het select element is onderdeel van het besturingssysteem, niet de browser chroom. Daarom is het zeer onbetrouwbaar te stylen, en het heeft niet per se zin om te proberen toch."

Jacob Alvarez
Bewerkt antwoord 20ste0 juni 2016 в 4:41
Commentaren (0)

<select> tags kunnen met CSS worden vormgegeven, net als elk ander HTML element op een HTML pagina die in een browser wordt weergegeven. Hieronder staat een (te simpel) voorbeeld dat een select element op de pagina plaatst en de tekst van de opties in blauw weergeeft.

Voorbeeld HTML bestand (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Ali Shakiba
Bewerkt antwoord 6de6 maart 2016 в 6:49
Commentaren (3)

Ja. Je kunt elk HTML-element met zijn tagnaam een stijl geven, zoals dit:

select {
  font-weight: bold;
}

Natuurlijk kun je ook een CSS class gebruiken om het element te stijlen, zoals elk ander element:


<select class="important">
  Important Option
  Another Important Option
Paul Sweatte
Bewerkt antwoord 26ste5 oktober 2013 в 12:31
Commentaren (3)