¿Cómo puedo estilizar un desplegable con sólo CSS?

¿Existe una forma de estilizar un desplegable <select> sólo con CSS?

Necesito estilizar un formulario <select> tanto como sea humanamente posible, sin ningún JavaScript. ¿Cuáles son las propiedades que puedo utilizar para hacerlo en CSS?

Este código tiene que ser compatible con los principales navegadores:

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

Sé que puedo hacerlo con JavaScript: Ejemplo.

Y yo'no estoy hablando de estilo simple. Quiero saber, lo mejor que podemos hacer con CSS solamente.

He encontrado preguntas similares en Stack Overflow.

Y esta en Doctype.com.

Peter Mortensen
Pregunta editada 7º septiembre 2019 в 7:15
Programación
cross-browser html css combobox skinning
13º diciembre 2009 в 3:33
87 vistas

El elemento select y su función desplegable son difíciles de estilizar.

atributos de estilo para el elemento select de Chris Heilmann confirma lo que Ryan Dohery dijo en un comentario a la primera respuesta:

"El elemento select es parte del sistema operativo, no del cromo del navegador. Por lo tanto, es muy poco fiable para el estilo, y no tiene necesariamente sentido para tratar de de todos modos".

Jacob Alvarez
Respuesta editada 20º junio 2016 в 4:41
Comentarios (0)

Las etiquetas <select> pueden ser estilizadas a través de CSS como cualquier otro elemento HTML en una página HTML renderizada en un navegador. A continuación se muestra un ejemplo (demasiado simple) que posicionará un elemento de selección en la página y mostrará el texto de las opciones en azul.

Archivo HTML de ejemplo (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Ali Shakiba
Respuesta editada 6º marzo 2016 в 6:49
Comentarios (3)

Sí, se puede aplicar estilo a cualquier elemento HTML por su nombre de etiqueta, así:

select {
  font-weight: bold;
}

Por supuesto, también puede utilizar una clase CSS para darle estilo, como a cualquier otro elemento:


<select class="important">
  Important Option
  Another Important Option
Paul Sweatte
Respuesta editada 26º octubre 2013 в 12:31
Comentarios (3)