Question Comment créer un espace réservé pour une boîte 'select'?


J'utilise des espaces réservés pour les entrées de texte qui fonctionne très bien. Mais je voudrais aussi utiliser un espace réservé pour mes selectbox. Bien sûr, je peux juste utiliser ce code:

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

Mais l'option "Sélectionnez votre option" est en noir au lieu de gris clair. Donc, ma solution pourrait être basée sur CSS. jQuery va bien aussi.

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

Edit: La question est: comment les gens créent-ils des espaces réservés dans les selectbox? Mais il a déjà été répondu, à la vôtre.

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

select {
    color:#999;
}

1130
2018-04-27 13:39


origine


Réponses:


Que diriez-vous d'une réponse non CSS - pas de javascript / jQuery?

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


2330
2018-05-02 15:45



Juste trébuché sur cette question, 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>

L'option Désactivé arrête le <option> étant sélectionné à la fois avec la souris et le clavier, 'display:none' permet à l'utilisateur de toujours sélectionner via les flèches du clavier. le 'display:none' le style rend la zone de liste belle.

Note: Utiliser un vide value attribut sur l'option "espace réservé" permet la validation (attribut requis) pour contourner le "espace réservé", donc si l'option n'est pas modifiée mais est requise; le navigateur doit inviter l'utilisateur à choisir une option dans la liste.

Mise à jour (juillet 2015):

Cette méthode est confirmée en travaillant dans les navigateurs suivants:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (L'espace réservé est visible dans la liste déroulante mais n'est pas sélectionnable)
  • Microsoft Internet Explorer - v.11 (Espace réservé visible dans la liste déroulante mais non sélectionnable)
  • Project Spartan - v.15.10130 (L'espace réservé est visible dans la liste déroulante mais n'est pas sélectionnable)

Mise à jour (octobre 2015):

Enlevé le style="display: none" en faveur de l'attribut HTML5 hidden qui a un large soutien. le hidden élément a des traits similaires à display: none dans Safari, IE, (projet Spartan a besoin de vérifier) ​​où le option est visible dans la liste déroulante mais n'est pas sélectionnable.

Mise à jour (janvier 2016):

Quand le select élément est required il permet l'utilisation de la :invalid CSS pseudo-classe qui vous permet de style le select élément dans son état "espace réservé". :invalid fonctionne ici à cause de la valeur vide dans l'espace réservé option.

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

La plupart des navigateurs supportent cette pseudo-classe. IE10 +. Cela fonctionne mieux avec style personnalisé select éléments; Dans certains cas, c'est-à-dire dans Mac / Chrome / Safari, vous devrez modifier l'apparence par défaut select boîte de sorte que certains styles s'affichent. background-color, color. Vous pouvez trouver quelques exemples et plus sur la compatibilité à developer.mozilla.org.

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

Select box native Mac in Chrome

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

Altered select box Mac in Chrome


621
2017-12-09 08:22



Pour un champ obligatoire, il existe une solution pure-CSS dans les navigateurs modernes:

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



Quelque chose comme ça peut-être?

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/


92
2018-04-27 13:50



Je viens d'ajouter l'attribut caché dans l'option comme ci-dessous, Cela fonctionne bien pour moi.

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


35
2018-06-30 10:42



Cette solution fonctionne également dans FireFox:
Sans aucun 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



J'ai eu le même problème et lors de la recherche est venu à travers cette question, et après avoir trouvé une bonne solution pour moi, je voudrais 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;
}

JS:

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

Après que le client fasse d'abord sélectionner aucun besoin de couleur grise, donc JS supprime la classe place_holder. J'espère que ça aidera quelqu'un :)

Mettre à jour: Merci à @ user1096901, comme un travail pour le navigateur IE, vous pouvez ajouter place_holder classe à nouveau au cas où la première option est sélectionnée à nouveau :)


19
2017-08-11 05:00



Voici le mien

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


12
2017-11-15 06:00