¿Cómo creo un marcador de posición para un cuadro de 'selección'?
Estoy usando marcadores de posición para entradas de texto, lo cual funciona bien. Pero también me gustaría usar un marcador de posición para mis cuadros de selección. Por supuesto que puedo usar este código:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
Pero "Seleccione su opción" está en negro en lugar de gris claro. Entonces mi solución podría estar basada en CSS. jQuery también está bien.
Esto solo hace que la opción aparezca en gris en el menú desplegable (después de hacer clic en la flecha):
option:first {
color: #999;
}
La pregunta es: ¿Cómo crean las personas marcadores de posición en cuadros de selección? Pero ya está respondida, saludos.
Y usar esto da como resultado que el valor seleccionado siempre sea gris (incluso después de seleccionar una opción real):
select {
color: #999;
}
Una respuesta sin CSS, sin JavaScript/jQuery:
<label>Option name
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
</label>Actualización (diciembre de 2021):
Esto funciona para las últimas versiones de Firefox, Chrome y Safari. En el pasado, no funcionaba para muchos navegadores, como se señala en los comentarios.
Esto es lo que funciona en Firefox y Chrome (al menos):
<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
<option value="" disabled selected hidden>Please Choose...</option>
<option value="0">Open when powered (most valves do this)</option>
<option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>El atributo deshabilitado<option> impide que se seleccione con el mouse o el teclado; si acaba de usar 'display:none', le permite al usuario seleccionarlo mediante la navegación con el teclado.
El uso de un atributo vacío valueen la opción "marcador de posición" permite la validación (a través del requiredatributo) para evitar tener el "marcador de posición", por lo que si la opción no se cambia, pero es obligatoria, el navegador debe pedirle al usuario que elija una opción. la lista.
Cuando el selectelemento tiene el requiredatributo, permite el uso de la :invalidpseudoclase CSS que le permite aplicar estilo al selectelemento cuando se encuentra en su estado de "marcador de posición". :invalidfunciona aquí debido al valor vacío en el marcador de posición option.
Una vez que se haya establecido un valor, la :invalidpseudoclase se eliminará. Opcionalmente también puedes utilizarlo :validsi así lo deseas.
Esto funciona mejor con selectelementos de estilo personalizado; en algunos casos, es decir (Mac en Chrome/Safari), necesitarás cambiar la apariencia predeterminada del selectcuadro para que se muestren ciertos estilos, es decir, background-colory color. Puedes encontrar algunos ejemplos y más sobre compatibilidad en desarrollador.mozilla.org .
Apariencia de elementos nativos Mac en Chrome:
Usando el elemento de borde modificado Mac en Chrome:
Para un campo obligatorio, existe una solución CSS pura en los navegadores modernos:
select:required:invalid {
color: gray;
}
option[value=""][disabled] {
display: none;
}
option {
color: black;
}<select required>
<option value="" disabled selected>Select something...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Algo como esto:
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: http://jsfiddle.net/Zmf6t/
