Pregunta ¿Cómo hago un marcador de posición para un cuadro de 'seleccionar'?


Estoy usando marcadores de posición para las entradas de texto que está funcionando bien. Pero me gustaría usar un marcador de posición para mis selectboxes también. Por supuesto que puedo usar este código:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

Pero la opción "Seleccionar su opción" está en negro en lugar de gris claro. Entonces mi solución podría estar basada en CSS. jQuery está bien también.

Esto solo hace que la opción sea gris en el menú desplegable (luego de hacer clic en la flecha):

option:first {
    color: #999;
}

Editar: La pregunta es: ¿cómo crean las personas marcadores de posición en las casillas de selección? Pero ya ha sido respondido, ¡salud!

Y al utilizar esto, el valor seleccionado siempre será gris (incluso después de seleccionar una opción real):

select {
    color:#999;
}

1130
2018-04-27 13:39


origen


Respuestas:


¿Qué tal un CSS no - no hay respuesta javascript / jQuery?

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


2330
2018-05-02 15:45



Acabo de tropezar con esta pregunta, 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>

La opción Deshabilitado detiene el <option> siendo seleccionado tanto con el mouse como con el teclado, mientras que solo estoy usando 'display:none' permite al usuario seguir seleccionando a través de las flechas del teclado. los 'display:none' el estilo solo hace que el cuadro de lista se vea "bonito".

Nota: usando un vacío value El atributo en la opción "marcador de posición" permite la validación (atributo requerido) para evitar tener el "marcador de posición", por lo que si la opción no se cambia pero se requiere; el navegador debe solicitar al usuario que elija una opción de la lista.

Actualización (julio de 2015):

Este método se confirma trabajando en los siguientes navegadores:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (Marcador de posición es visible en el menú desplegable pero no se puede seleccionar)
  • Microsoft Internet Explorer - v.11 (Marcador de posición es visible en el menú desplegable pero no se puede seleccionar)
  • Proyecto Spartan - v.15.10130 (El marcador de posición es visible en el menú desplegable pero no se puede seleccionar)

Actualización (octubre de 2015):

Retiró el style="display: none" a favor del atributo HTML5 hidden que tiene un amplio apoyo. los hidden elemento tiene rasgos similares a display: none en Safari, IE, (Proyecto Spartan necesita verificación) donde el option es visible en el menú desplegable, pero no es seleccionable.

Actualización (enero de 2016):

Cuando el select elemento es required permite el uso del :invalid Pseudo-clase CSS que le permite diseñar select elemento cuando está en su estado "marcador de posición". :invalid funciona aquí debido al valor vacío en el marcador de posición option.

Una vez que se ha establecido un valor, :invalid pseudo-clase será eliminada. Opcionalmente también puedes usar :valid si así lo deseas.

La mayoría de los navegadores admiten esta pseudoclase. IE10 +. Esto funciona mejor con estilo personalizado select elementos; En algunos casos, es decir (Mac en Chrome / Safari) deberá cambiar la apariencia predeterminada del select cuadro para que ciertos estilos muestren, es decir background-color, color. Puede encontrar algunos ejemplos y más sobre compatibilidad en developer.mozilla.org.

Aspecto del elemento nativo Mac en Chrome:

Select box native Mac in Chrome

Usar elemento de borde modificado Mac en Chrome:

Altered select box Mac in Chrome


621
2017-12-09 08:22



Para un campo obligatorio, hay una solución de CSS puro 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>


178
2018-04-22 18:30



Algo como esto tal vez?

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/


92
2018-04-27 13:50



Acabo de agregar el atributo oculto en la opción siguiente, funciona bien para mí.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


35
2018-06-30 10:42



Esa solución también funciona en Firefox:
Sin ningún JS.

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


22
2018-02-12 08:24



Tuve el mismo problema y durante la búsqueda encontré esta pregunta, y después de encontrar una buena solución para mí, me gustaría compartirla con ustedes en caso de que alguien se beneficie de ella. aquí está: HTML:

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS:

.place_holder{
    color: gray;
}
option{
    color: #000000;
}

JS:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

Después de que el cliente hace la primera selección, no necesita color gris para que JS elimine la clase place_holder. Espero que esto ayude a alguien :)

Actualizar: Gracias a @ user1096901, como una solución alternativa para el navegador IE, puede agregar place_holder clase de nuevo en caso de que la primera opción se seleccione de nuevo :)


19
2017-08-11 05:00