Estoy utilizando marcadores de posición para las entradas de texto, lo que funciona bien. Pero me gustaría utilizar un marcador de posición para mis cajas de selección también. Por supuesto que puedo usar este código:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
Pero el 'Seleccione su opción' es en negro en lugar de lightgrey. Así que mi solución podría ser posiblemente basado en CSS. jQuery está bien también.
Esto sólo hace que la opción gris en el desplegable (por lo que después de hacer clic en la flecha):
option:first {
color: #999;
}
La pregunta es: ¿Cómo se crean los marcadores de posición en las cajas de selección? Pero ya ha sido contestada, saludos.
Y el uso de este resultado en el valor seleccionado siempre es gris (incluso después de seleccionar una opción real):
select {
color: #999;
}
Acabo de tropezar con esta pregunta, y esto es lo que funciona en Firefox y Chrome (al menos):
La opción Disabled impide que la <opción>
sea seleccionada tanto con el ratón como con el teclado, mientras que el uso de 'display:none'
permite al usuario seguir seleccionando a través de las flechas del teclado. El estilo 'display:none'
sólo hace que el cuadro de lista se vea 'bonito'.
Nota: El uso de un atributo value
vacío en la opción "marcador de posición" permite que la validación (atributo requerido) funcione alrededor de tener el "marcador de posición", por lo que si la opción no se cambia, pero es requerida, el navegador debe pedir al usuario que elija una opción de la lista.
Actualización (julio de 2015):
Se confirma que este método funciona en los siguientes navegadores:
Actualización (octubre de 2015):
He eliminado el style="display: none"
en favor del atributo HTML5 hidden
que tiene un amplio soporte. El elemento hidden
tiene características similares a display: none
en Safari, Internet Explorer, (Project Spartan necesita comprobarlo) donde la opción
es visible en el desplegable, pero no es seleccionable.
Actualización (enero de 2016):
Cuando el elemento select
es required
permite el uso de la pseudoclase CSS :invalid
que permite estilizar el elemento select
cuando está en su estado de "placeholder". El elemento :invalid
funciona aquí debido al valor vacío del marcador de posición option
.
Una vez que se haya establecido un valor, la pseudoclase :invalid
se eliminará. Si lo desea, también puede utilizar :valid
.
La mayoría de los navegadores soportan esta pseudo-clase. Internet Explorer 10 y posteriores. Esto funciona mejor con elementos select
con estilos personalizados; en algunos casos, por ejemplo (Mac en Chrome / Safari) tendrá que cambiar la apariencia por defecto de la caja select
para que se muestren ciertos estilos, por ejemplo, background-color
y color
. Puedes encontrar algunos ejemplos y más información sobre la compatibilidad en developer.mozilla.org.
Aspecto nativo del elemento Mac en Chrome:
Caja de selección nativa de Mac en Chrome
Uso del elemento de borde alterado Mac en Chrome:
Algo así:
HTML:
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSS:
#choice option { color: black; }
.empty { color: gray; }
JavaScript:
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
Ejemplo de trabajo: