¿Cómo puedo hacer un marcador de posición para una caja de selección?

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;
}
Peter Mortensen
Pregunta editada 1º septiembre 2019 в 1:05
Programación
html css html-select placeholder
27º abril 2011 в 1:39
22 vistas
Solución

Una respuesta sin CSS - sin JavaScript/jQuery:


<select>
    Select your option
    Durr
Peter Mortensen
Respuesta editada 1º septiembre 2019 в 1:06
Comentarios (20)

Acabo de tropezar con esta pregunta, y esto es lo que funciona en Firefox y Chrome (al menos):

select:invalid { color: gris; }



    Por favor, elija...
    Abrir cuando se alimenta (la mayoría de las válvulas lo hacen)
    Cerrada cuando está alimentada, se abre automáticamente cuando se corta la alimentación

La opción Disabled impide que la `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:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (el marcador de posición es visible en el desplegable, pero no es seleccionable)
  • Microsoft Internet Explorer - v.11 (el marcador de posición es visible en el desplegable, pero no es seleccionable)
  • Project Spartan - v.15.10130 (el marcador de posición es visible en el menú desplegable, pero no es seleccionable)

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:

Peter Mortensen
Respuesta editada 1º septiembre 2019 в 1:12
Comentarios (15)

Algo así:

HTML:


<select id="choice">
    Choose...
    Something
    Something else
    Another choice
Peter Mortensen
Respuesta editada 1º septiembre 2019 в 1:06
Comentarios (4)