¿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:
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.
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".
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):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Archivo CSS de ejemplo (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
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">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>