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



11 Answers

Me topé 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 la selección de la <option> con el mouse y el teclado, mientras que el uso de 'display:none' permite al usuario seleccionar mediante las flechas del teclado. El estilo 'display:none' solo hace que el cuadro de lista se vea 'agradable'.

Nota: El uso de un atributo de value vacío en la opción "marcador de posición" permite que la validación (atributo requerido) evite tener el "marcador de posición", por lo que si la opción no se cambia pero es necesaria; el navegador debe indicar 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 (El marcador de posición está visible en el menú desplegable pero no se puede seleccionar)
  • Microsoft Internet Explorer - v.11 (el marcador de posición está visible en el menú desplegable pero no se puede seleccionar)
  • Project Spartan - v.15.10130 (El marcador de posición está visible en el menú desplegable pero no se puede seleccionar)

Actualización (octubre 2015):

Se eliminó el style="display: none" en favor del atributo HTML5 hidden que tiene un amplio soporte. El elemento hidden tiene rasgos similares a los de la display: none en Safari, IE, (el Proyecto Spartan necesita verificación) donde la option está visible en el menú desplegable pero no se puede seleccionar.

Actualización (enero 2016):

Cuando se required elemento de select se permite el uso de la :invalid CSS :invalid , que le permite aplicar un estilo al elemento de select cuando está en el estado "marcador de posición". :invalid funciona aquí debido al valor vacío en la option marcador de posición.

Una vez que se haya establecido un valor, se eliminará la pseudo-clase :invalid . Opcionalmente también puede utilizar :valid si así lo desea.

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

Elemento nativo apariencia Mac en Chrome:

Usando el elemento de borde alterado Mac en Chrome:

html css html5 html-select placeholder

Estoy usando marcadores de posición para las entradas de texto que están funcionando bien. Pero también me gustaría usar un marcador de posición para mis selectboxes. 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' está en negro en lugar de gris claro. Así que mi solución podría estar basada en CSS. jQuery también está bien.

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

option:first {
    color: #999;
}

Edición: la pregunta es: ¿cómo crean las personas marcadores de posición en los cuadros de selección? Pero ya se ha contestado, saludos.

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

select {
    color:#999;
}



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/




Esa solución funciona también 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>




No hay necesidad de JS o CSS, solo 3 atributos:

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

no muestra la opción, solo establece el valor de la opción como predeterminado.

Sin embargo, si simplemente no te gusta un marcador de posición del mismo color que el resto , puedes corregirlo en línea de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

Obviamente, puede separar las funciones y al menos el CSS de la selección en archivos separados.

Nota: la función onload corrige un error de actualización.




Veo signos de respuestas correctas, pero si lo juntamos, esta sería mi solución.

select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>




Otra posibilidad en JS:

 $('body').on('change','select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color','#999');
        $(this).children().css('color','black');
    }
    else {
        $(this).css('color','black');
        $(this).children().css('color','black');
    }
});

JSFiddle




Puede hacer esto sin usar Javascript usando solo HTML . Debe configurar la opción de selección predeterminada disabled="" y selected="" y seleccionar la etiqueta required="". El navegador no permite al usuario enviar el formulario sin seleccionar una opción.

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>



No pude hacer que ninguno de estos funcionara actualmente, porque para mí no es necesario (1) y (2) necesita la opción de volver a la selección predeterminada. Así que aquí hay una opción de mano dura si estás usando jQuery:

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')){
          $(this).css('color','#999');
  }
  else{
          $(this).css('color','#555');
  }
});

$selects.each(function(){
  $(this).change();
});
option{
    color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>




El usuario no debe ver el marcador de posición en las opciones de selección. Sugiero usar el atributo hidden para la opción de marcador de posición y no necesita el atributo selected para esta opción, solo puede ponerlo como el primero.

select:not(:valid){
  color: #999;
}
<select required>
        <option value="" hidden>Select your option</option>
        <option value="0">First option</option>
        <option value="1">Second option</option>
    </select>




Introduzca [type="text"] marcador de posición de estilo para elementos seleccionados

La siguiente solución simula un marcador de posición en relación con un elemento de input[type="text"] :

$( '.example' ).change( function ()
{
    $( this ).css( 'color', $( this ).val() === '' ? '#999' : '#555' );
});
.example { color:#999; }
.example > option { color:#555; }
.example > option[value=""] { color:#999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
    <option value="">Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>




Aquí está mi contribución. HAML + Coffeescript + SCSS

HAML
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
Coffeescript
  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()
SCSS
select option {
  color: black;
}

Es posible usar solo CSS cambiando el código del servidor y solo configurando los estilos de clase dependiendo del valor actual de la propiedad, pero de esta manera parece más fácil y limpio.

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();
    select option {
      color: black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

Puedes agregar más CSS ( select option:first-child ) para mantener el marcador de posición en gris cuando se abre, pero eso no me importó.




Related