Comment créer un espace réservé pour une case "sélectionner"?

Question

J'utilise des espaces réservés pour les entrées de texte, ce qui fonctionne très bien. Mais j'aimerais aussi utiliser un espace réservé pour mes sélections. Bien sûr, je peux simplement 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 éventuellement être basée sur CSS. jQuery est bien aussi. 

Cela ne fait que rendre l’option grise dans le menu déroulant (donc après avoir cliqué sur la flèche):

option:first {
    color: #999;
}

Edit: La question est de savoir comment les gens créent des espaces réservés dans les sélections. Mais il a déjà été répondu, acclamations.

Et si vous utilisez ceci, la valeur sélectionnée sera toujours grise (même après la sélection d’une option réelle):

select {
    color:#999;
}

Answer 1

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

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

Answer 2

Juste tombé 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ée empêche le <option> d'être sélectionné à la fois avec la souris et le clavier, alors que le simple fait d'utiliser 'display:none' permet à l'utilisateur de toujours effectuer la sélection via les flèches du clavier. Le style 'display:none' donne à la zone de liste un aspect "sympa".

Remarque: L'utilisation d'un attribut value vide dans l'option "espace réservé" permet à la validation (attribut requis) de 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 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 ne peut pas être sélectionné)
• Microsoft Internet Explorer - v.11 (un espace réservé est visible dans la liste déroulante mais n'est pas sélectionnable)
• Project Spartan - v.15.10130 (Un espace réservé est visible dans la liste déroulante mais ne peut pas être sélectionné)

Mise à jour (octobre 2015):

Suppression du style="display: none" en faveur de l'attribut HTML5 hidden qui est largement pris en charge. L'élément hidden a des caractéristiques similaires à celles de display: none dans Safari, IE (le projet Spartan doit être vérifié), où option est visible dans la liste déroulante mais ne peut pas être sélectionné.

Mise à jour (janvier 2016):

Lorsque l'élément select est required, il permet d'utiliser la pseudo-classe CSS :invalid, qui vous permet de styliser l'élément select lorsqu'il est 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, la pseudo-classe :invalid sera supprimée. Vous pouvez également éventuellement utiliser :valid si vous le souhaitez.

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

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

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

Answer 3

Pour un domaine requis, il existe une solution purement 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>

Answer 4

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/

Answer 5

Je viens d'ajouter un attribut caché en option comme ci-dessous, cela fonctionne très bien pour moi.

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

Answer 6

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

Answer 7

J'ai eu le même problème et, en cherchant, je me suis posé cette question et, après avoir trouvé la bonne solution pour moi, j'aimerais la partager avec vous au cas où quelqu'un en tirerait profit ... la voici: 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");
});

Une fois que le client a sélectionné pour la première fois, plus besoin de couleur grise, JS supprime la classe place_holder. J'espère que cela aidera quelqu'un :)

Mise à jour: / Grâce à @ user1096901, en tant que solution de contournement pour le navigateur IE, vous pouvez ajouter la classe place_holder si la première option est sélectionnée à nouveau :)

Answer 8

Il n'y a pas besoin de JS ou CSS, seulement 3 attributs:

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

elle n'affiche pas l'option du tout, elle définit simplement la valeur de l'option comme valeur par défaut.

Cependant, si vous n'aimez pas un espace réservé de la même couleur que le reste, vous pouvez le corriger comme suit:

<!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>

Évidemment, vous pouvez séparer les fonctions et au moins le CSS de la sélection dans des fichiers séparés. 

Note: la fonction onload corrige un bogue d'actualisation.

Answer 9

Je vois des signes de réponses correctes, mais résumer tout cela serait ma solution.

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>

Answer 10

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>

Answer 11

Ici, j'ai modifié la réponse de David (réponse acceptée). Sur sa réponse, il a mis l'attribut désactivé et sélectionné sur la balise d'option, mais lorsque nous avons également placé la balise masquée, le résultat sera beaucoup plus intéressant. en train de re-sélectionner après que l'option "Durr" soit sélectionnée.

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

Answer 12

L'utilisateur ne doit pas voir l'espace réservé dans les options sélectionnées. Je suggère d'utiliser l'attribut hidden pour l'option d'espace réservé et vous n'avez pas besoin de l'attribut selected pour cette option, vous pouvez simplement le mettre en premier.

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>

Answer 13

Si vous utilisez angular go comme ça

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>

Answer 14

Une autre possibilité dans 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

Answer 15

Voici une solutionCSSqui fonctionne à merveille. Le contenu est ajouté (et positionné absolument par rapport au conteneur) après l'élément conteneur ( via: after pseudo-class ). Son texte provient de l'attribut de marque de réservation que j'ai défini lorsque j'ai utilisé la directive ( attr (marque de réservation) ). Un autre facteur clé est pointer-events: none - ceci permet aux clics sur le texte de l'espace réservé de passer à la sélection. Sinon, il ne tombera pas si l'utilisateur clique sur le texte.

J'ajoute le .empty class moi-même dans ma directive select mais normalement, je trouve que angular ajoute/supprime .ng-empty pour moi (je suppose que c'est parce que j'injecte la version 1.2 de Angular mon exemple de code)

(L'exemple montre également comment insérer des éléments HTML dans angularJS pour créer vos propres entrées personnalisées)

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;

  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;

    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }

    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }

  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.Push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.Push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }

});

so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>

Answer 16

Je ne parviens pas à faire fonctionner l’un d’entre eux pour le moment, car pour moi, c’est (1) non requis et (2) la possibilité de revenir à la sélection par défaut. Donc, voici une option difficile si vous utilisez 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>

Answer 17

Vous pouvez le faire sans utiliser Javascript en utilisant uniquement HTML Vous devez définir l'option de sélection par défaut disabled="" et selected="" et sélectionnez la balise required="". Navigateur n'autorise pas l'utilisateur à soumettre le formulaire sans sélectionner une option.

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

Answer 18

Voici un exemple de travail comment y parvenir avec du javascript pur qui gère les options de couleur après le premier clic:

<!DOCTYPE html>
<html>
  <head>
    <style>
    #myselect{
    color:gray;
    }
    </style>
  </head>
  <body>
    <select id="myselect">
      <option disabled selected>Choose Item
      </option>
      <option>Item 1
      </option>
      <option>Item 2
      </option>
      <option>Item 3
      </option>
    </select>
    <script>
      // add event listener to change color in the first click  
      document.getElementById("myselect").addEventListener("click",setColor)
      function setColor()
      {
        var combo = document.getElementById("myselect");
        combo.style.color = 'red';
        // remove Event Listener after the color is changed at the first click
        combo.removeEventListener("click", setColor);
      }
    </script>
  </body>
</html>

Answer 19

Je voulais que le SELECT soit gris jusqu'à ce qu'il soit sélectionné, donc pour ce morceau de HTML:

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

J'ai ajouté ces définitions CSS:

select { color: grey; }
select:valid { color: black; }

Cela fonctionne comme prévu dans Chrome/Safari, peut-être aussi dans d'autres navigateurs, mais je n'ai pas vérifié.

Answer 20

Essayez ceci pour changer

$("select").css("color","#757575");
$(document).on("change","select",function(){
    if ($(this).val() != "") {
        $(this).css("color","");
    } else {
        $(this).css("color","#757575");
    }
});

Answer 21

Je ne me contente pas de solutions HTML/CSS uniquement, j'ai donc décidé de créer une variable select personnalisée à l'aide de JS.

C’est quelque chose que j’ai écrit au cours des 30 dernières minutes et qui peut donc être amélioré.

Tout ce que vous avez à faire est de créer une liste simple avec peu d'attributs de données. Le code transforme automatiquement la liste en une liste déroulante sélectionnable. Il ajoute également une variable input masquée pour conserver la valeur sélectionnée, de sorte qu'elle puisse être utilisée dans un formulaire.

Contribution:

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

Sortie:

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

Le texte de l'élément qui est censé être un espace réservé est grisé. L'espace réservé est sélectionnable, au cas où l'utilisateur souhaite annuler son choix. En utilisant également CSS, tous les inconvénients de select peuvent être surmontés (par exemple, l’incapacité de styliser les options). 

// helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "▼", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});

.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

---

Update: J'ai amélioré ceci (sélection en utilisant les touches haut/bas/entrée). Nettoie un peu la sortie et en fait un objet. Courant de sortie:

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

Initialisation:

new Liselect(document.getElementsByTagName("ul")[0]);

Pour examen complémentaire: JSFiddle ,  GitHub (renommé).

---

Update: Réécrit cela à nouveau. Au lieu d'utiliser une liste, nous pouvons simplement utiliser une sélection. De cette façon, cela fonctionnera même sans JS (au cas où il serait désactivé).

Contribution:

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Sortie:

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

JSFiddle , GitHub .

Answer 22

Saisissez [type="text"] Style Placeholder pour Select Elements

La solution suivante simule un espace réservé lié à un élément 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>

Answer 23

J'aime la solution acceptée ci-dessus et cela fonctionne très bien sans JavaScript. 

Je veux juste ajouter comment j'ai adopté cette réponse pour un composant de réaction à sélection contrôlée, car il m'a fallu plusieurs essais pour la comprendre. Il serait très simple d’intégrer react-select et d’en finir avec cela, mais à moins que vous n’ayez besoin des fonctionnalités étonnantes fournies par ce dépôt, ce que je n’ai pas pour le projet en question, il n’est pas nécessaire d’ajouter davantage de KB à mon paquet. Remarque, react-select gère les espaces réservés dans les sélections via un système complexe de divers éléments inputs et html.

Dans React, vous ne pouvez pas ajouter l'attribut selected à vos options pour un composant contrôlé React gère l'état de la sélection via un attribut value sur la select elle-même, avec un gestionnaire de modification, où la valeur doit correspondre à l'un des attributs de valeur dans les options elles-mêmes.

Tels que, par exemple 

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

Puisqu'il serait déplacé et qu'en réalité, l'ajout de l'attribut selected à l'une des options créerait une erreur, que se passera-t-il alors?

La réponse est simple une fois que vous y réfléchissez. Puisque nous voulons que notre première option soit selected ainsi que disabled et hidden, nous devons faire trois choses:

1. Ajoutez les attributs hidden et disabled à la première option définie.
2. Définissez la valeur de la première option sur une chaîne vide.
3. Initialisez la valeur de la select pour qu'elle soit également une chaîne vide.

state = { selectValue = "" } //state or props or their equivalent

// in the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

Maintenant, vous pouvez styler la sélection comme indiqué ci-dessus (ou via une className si vous préférez)

select:invalid { color: gray; }

Answer 24

Solution pour Angular 2

Créer une étiquette sur la sélection

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

et appliquer CSS pour le placer en haut

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none vous permet d'afficher la sélection lorsque vous cliquez sur l'étiquette, qui est masquée lorsque vous sélectionnez une option.

 angularhtmlcss

Answer 25

Dans Angular, nous pouvons ajouter une option en tant qu'espace réservé que peut être masqué dans l'option déroulante . Nous pouvons même ajouter une icône déroulante personnalisée en tant qu'arrière-plan qui remplace le navigateur déroulant. icône.

Le astuce consiste à activer l’espace réservé css uniquement lorsque valeur n’est pas sélectionné

/ ** Mon modèle de composant */

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/ ** Mon composant.TS */

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/**global.scss*/

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}

Answer 26

Cette solution HTML + CSS a fonctionné pour moi:

form select:invalid {
  color: gray;
}

form select option:first-child {
  color: gray;
}

form select:invalid option:not(:first-child) {
  color: black;
}

<form>
  <select required>
    <option value="">Select Planet...</option>
    <option value="earth">Earth</option>
    <option value="Pandora">Pandora</option>
  </select>
</form>

Bonne chance...