Comment créer un espace réservé pour un champ de sélection ?

Question

J'utilise des espaces réservés pour les entrées de texte, ce qui fonctionne très bien. Mais j'aimerais également utiliser un placeholder pour mes boîtes de sélection. Bien sûr, je peux simplement utiliser ce code :

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

Mais la rubrique "Sélectionnez votre option" est en noir au lieu de gris clair. Ma solution pourrait donc être basée sur les CSS, mais jQuery convient également.

Cela ne fait que rendre l'option grise dans la liste déroulante (donc après avoir cliqué sur la flèche) :

option:first {
    color: #999;
}

La question est la suivante : comment fait-on pour créer des espaces réservés dans les boîtes de sélection ? Mais il y a déjà été répondu, merci.

Et en l'utilisant, la valeur sélectionnée est toujours grise (même après avoir sélectionné une option réelle) :

select {
    color: #999;
}

Answer 1

Une réponse non-CSS - pas de JavaScript/jQuery :

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

Answer 2

Je viens de tomber sur cette question, et voici ce qui fonctionne dans Firefox et Chrome (au moins) :

<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 Handicapés L'option arrête le <option> étant sélectionné à la fois avec la souris et le clavier, alors qu'en utilisant seulement 'display:none' permet à l'utilisateur de continuer à sélectionner via les flèches du clavier. Le site 'display:none' Ce style permet simplement de donner un aspect "sympa" à la boîte de liste.

Remarque : L'utilisation d'un value sur l'option "placeholder" permet à la validation (attribut requis) de contourner la présence du "placeholder". Ainsi, si l'option n'est pas modifiée, mais qu'elle est requise, le navigateur doit inviter l'utilisateur à choisir une option dans la liste.

Mise à jour (juillet 2015) :

Il est confirmé que cette méthode fonctionne dans les navigateurs suivants :

• Google Chrome - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7 (le caractère générique est visible dans la liste déroulante, mais il n'est pas sélectionnable)
• Microsoft Internet Explorer - v.11 (L'espace réservé est visible dans la liste déroulante mais ne peut pas être sélectionné)
• Project Spartan - v.15.10130 (le placeholder est visible dans la liste déroulante, mais il n'est pas sélectionnable)

Mise à jour (octobre 2015) :

J'ai retiré le style="display: none" en faveur de l'attribut HTML5 hidden qui bénéficie d'un large soutien. Le site hidden a des caractéristiques similaires à celles de l'élément display: none dans Safari, Internet Explorer, (Project Spartan doit être vérifié) où la option est visible dans la liste déroulante, mais il n'est pas sélectionnable.

Mise à jour (janvier 2016) :

Lorsque le select L'élément est required il permet l'utilisation de la :invalid pseudo-classe CSS qui vous permet de donner un style à l'élément select lorsqu'il est dans son état "placeholder". :invalid fonctionne ici en raison de la valeur vide dans l'espace réservé. option .

Une fois qu'une valeur a été définie, le :invalid la pseudo-classe sera abandonnée. Vous pouvez également utiliser :valid si vous le souhaitez.

La plupart des navigateurs supportent cette pseudo-classe. Internet Explorer 10 et versions ultérieures. Cela fonctionne mieux avec les éléments de style personnalisés select Dans certains cas, par exemple (Mac dans Chrome / Safari), vous devrez modifier l'apparence par défaut de l'élément select pour que certains styles s'affichent, par exemple, background-color y color . Vous trouverez des exemples et d'autres informations sur la compatibilité à l'adresse suivante développeur.mozilla.org .

Apparition de l'élément natif Mac dans Chrome :

Utilisation de l'élément de bordure modifié Mac dans Chrome :

Answer 3

Quelque chose comme ça :

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();

Exemple de travail : http://jsfiddle.net/Zmf6t/

Answer 4

La solution ci-dessous fonctionne également dans Firefox, sans aucun JavaScript :

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>

Answer 5

J'ai eu le même problème et en cherchant je suis tombé sur cette question, et après avoir trouvé une bonne solution pour moi, je voudrais la partager avec vous les gars au cas où quelqu'un pourrait en bénéficier.

C'est ici :

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;
}

JavaScript :

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

Une fois que le client a effectué sa première sélection, il n'y a plus besoin de couleur grise, donc le code JavaScript supprime la classe place_holder .

Grâce à @user1096901, comme solution de contournement pour le navigateur Internet Explorer, vous pouvez ajouter la balise place_holder classe à nouveau au cas où la première option serait à nouveau sélectionnée :)