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, ce qui fonctionne très bien. Mais j'aimerais aussi utiliser un paramètre pour mes sélections. Bien sûr, je peux utiliser ce code:

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

mais le 'Select your option' est en noir à la place de lightgrey. Donc ma solution pourrait être basée sur le CSS. jQuery va bien aussi.

cela ne rend l'option grise que 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 boîtes selectbox? Mais il a déjà été répondu, merci.

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;
}
1172
demandé sur William Perron 2011-04-27 17:39:15
la source

23 ответов

Que Diriez - vous d'une réponse non CSS-no javascript/jQuery?

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>
2411
répondu David 2015-05-12 18:11:37
la source

vient de tomber sur cette question, voici ce qui fonctionne dans FireFox & 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 la sélection du <option> à la fois avec la souris et le clavier, alors que le simple fait d'utiliser 'display:none' permet à l'utilisateur de sélectionner par les flèches du clavier. Le style 'display:none' ne fait que rendre la boîte de liste "agréable".

Note: utiliser un attribut vide value sur la l'option " placeholder "permet la validation (attribut requis) pour contourner l'option" placeholder", donc si l'option n'est pas modifiée mais est requise, le navigateur devrait 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 (espace Réservé est visible dans la liste déroulante, mais n'est pas sélectionnable)
  • Microsoft Internet Explorer-v. 11 (le paramètre est visible dans dropdown mais n'est pas sélectionnable)
  • Projet Spartan - v. 15.10130 (espace Réservé est visible dans la liste déroulante, mais n'est pas sélectionnable)

Mise À Jour (Octobre 2015):

supprimé le style="display: none" en faveur de l'attribut HTML5 hidden qui bénéficie d'un large soutien. L'élément hidden a des caractéristiques similaires à display: none dans Safari, C'est-à-dire (le Projet Spartan doit être vérifié) où le option est visible dans dropdown mais n'est pas sélectionnable.

Mise À Jour (Janvier 2016):

quand l'élément select est required il permet l'utilisation de la :invalid CSS pseudo-classe qui vous permet de style l'élément select quand il est dans l'état" placeholder". :invalid fonctionne ici en raison de la valeur vide dans le conteneur option .

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

la plupart des navigateurs prennent en charge cette pseudo-classe. IE10+. Cela fonctionne le mieux avec des éléments select sur mesure; dans certains cas, C'est-à-dire ( Mac in Chrome / Safari) vous aurez besoin de changer l'apparence par défaut de la boîte select de sorte que certains styles s'affichent i.e. background-color , color . Vous pouvez trouver quelques exemples et plus sur la compatibilité à developer.mozilla.org .

Native élément de l'apparence de Mac dans google Chrome:

Select box native Mac in Chrome

utilisant un élément de bordure Mac modifié en Chrome:

Altered select box Mac in Chrome

645
répondu William Isted 2016-01-14 17:05:54
la source

pour un champ requis, il existe une solution CSS pure 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>
188
répondu MattW 2016-03-28 19:09:06
la source

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 pratique: http://jsfiddle.net/Zmf6t /

93
répondu Albireo 2012-04-29 04:01:17
la source

je viens d'ajouter attribut caché dans l'option comme ci-dessous, il fonctionne très bien pour moi.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>
36
répondu Ajithkumar S 2016-07-13 08:37:56
la source

que la solution fonctionne dans FireFox aussi:

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>
23
répondu Dani-Br 2015-05-12 18:40:09
la source

j'ai eu le même problème et tout en cherchant est tombé sur cette question, et après que j'ai trouvé une bonne solution pour moi je voudrais la partager avec vous les gars au cas où quelqu'un peut en bénéficier. ici, il 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");
});

après client fait d'abord sélectionner pas besoin de couleur grise donc JS supprime la classe place_holder . J'espère que cela aide quelqu'un :)

mise à Jour: Grâce à @user1096901, comme le navigateur IE, vous pouvez ajouter place_holder classe à nouveau dans le cas de la première option est activée à nouveau :)

21
répondu rramiii 2016-01-18 19:21:37
la source

ici est la mienne

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>
13
répondu Will Wang 2016-11-15 09:00:25
la source

il n'y a pas besoin de JS ou CSS, juste 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>

il ne montre pas l'option du tout, définit juste la valeur de l'option comme la valeur par défaut.

cependant, si vous venez de n'aimez pas un placeholder qui est de la même couleur que le reste , vous pouvez le fixer en ligne comme ceci:

<!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 les CSS de select en fichiers séparés.

Note: la fonction onload corrige un bug de rafraîchissement.

13
répondu Jacob Schneider 2018-02-28 14:54:37
la source

je vois des signes de réponses correctes, mais qui regroupe tout ce 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>
12
répondu user3520445 2016-03-17 19:57:47
la source

ici J'ai modifié la réponse de David (réponse acceptée). Sur sa réponse, il a mis l'attribut disabled et selected sur la balise d'option mais quand nous avons aussi mis l'étiquette cachée alors il aura l'air beaucoup mieux. En ajoutant un attribut caché supplémentaire sur la balise d'option, empêchera l'option " Select your option "d'être re-selectionnée après l'option" Durr " est sélectionnée.

<select>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="hurr">Durr</option>
</select>
10
répondu Nawaraj 2018-05-07 11:27:34
la source

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

4
répondu Jean-philippe Emond 2014-07-21 21:14:36
la source

Voici une solution CSS qui fonctionne à merveille. Le contenu est ajouté (et positionné absolument par rapport au conteneur) après l'élément contenant ( via :après la pseudo-classe ). Il obtient son texte à partir de l'attribut placeholder que j'ai défini où j'ai utilisé la directive ( attr(placeholder) ). Un autre facteur clé est pointeur-événements: aucun - cela permet des clics sur le texte du placeholder pour passer à travers pour la sélectionner. Sinon, il ne tombera pas si l'utilisateur clique sur le texte.

j'ajoute le .vide classe moi-même dans mon sélectionnez la directive, mais normalement je trouve que angulaires ajoute/supprime .ng-vide pour moi (je suppose que c'est b/c je suis l'injection de la version 1.2 du Angulaire dans mon exemple de code)

(l'exemple montre aussi comment envelopper des éléments HTML dans angularJS pour créer votre propre les entré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>
2
répondu flyer 2017-07-17 22:40:57
la source

vous pouvez le faire sans utiliser Javascript en utilisant seulement HTML vous devez définir l'option select par défaut disabled="" et selected="" et sélectionner L'étiquette required="". ne permet pas à l'utilisateur de 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>
1
répondu Thusitha Wickramasinghe 2016-12-15 18:03:25
la source

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

1
répondu fbparis 2017-06-07 10:56:43
la source

Je ne pouvais pas faire fonctionner l'un de ceux-ci actuellement, parce que pour moi, il est (1) Pas nécessaire et (2) besoin de l'option de revenir à la sélection par défaut. Donc voici une option de main lourde 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>
1
répondu Eric G 2017-06-14 00:34:53
la source

Essayez ceci pour un changement

$("select").css("color","#757575");
$(document).on("change","select",function(){
    if ($(this).val() != "") {
        $(this).css("color","");
    } else {
        $(this).css("color","#757575");
    }
});
0
répondu Jordan Lipana 2018-02-15 10:41:29
la source

Entrée [type="text"] Style espace Réservé pour Sélectionner les Éléments de

la solution suivante simule un espace réservé par rapport à 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>
0
répondu Grant Miller 2018-05-29 19:19:42
la source

Je ne me contente pas que de solutions HTML/CSS, j'ai donc décidé de créer un select personnalisé en utilisant JS.

C'est quelque chose que j'ai écrit dans les 30 dernières minutes, donc il peut encore être améliorée.

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 un input caché pour contenir la valeur sélectionnée, de sorte qu'il peut être utilisé sous une forme.

entrée:

<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'article qui est censé être un espace réservé est grisé. Le paramètre est sélectionnable, au cas où l'Utilisateur souhaite revenir sur son choix. Aussi en utilisant CSS, tous les inconvénients de select peuvent être surmontés (par exemple, incapacité du style des 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"}, "&#9660;", 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>

mise à jour : j'ai amélioré cela (sélection en utilisant les touches up/down/enter). Rangé la sortie un peu et transformé en un objet. Sortie actuelle:

<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 un examen complémentaire: JSFiddle , GitHub (renommé).


mise à Jour: Réécrit cette fois. Au lieu d'utiliser une liste, il suffit d'utiliser un select. De cette façon, il fonctionnera même sans JS (dans le cas où il est désactivé).

entrée:

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

0
répondu akinuri 2018-06-28 17:03:58
la source

si vous utilisez angular go comme ceci""

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>
0
répondu arun kumar 2018-08-29 12:06:54
la source
L'utilisateur

ne doit pas voir le paramètre dans les options de sélection. Je suggère d'utiliser l'attribut hidden pour l'option placeholder et vous n'avez pas besoin de l'attribut selected pour cette option vous pouvez juste 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>
0
répondu Roman Yakoviv 2018-10-05 11:03:30
la source

voici ma contribution. 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;
}

il est possible d'utiliser seulement CSS en changeant le code du serveur et en définissant seulement les styles de classe en fonction de la valeur actuelle de la propriété, mais cette façon semble plus facile et plus propre.

$('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>

vous pouvez ajouter plus de CSS ( select option:first-child ) pour garder la case grise quand elle s'ouvre, mais je ne m'en souciais pas.

-2
répondu Chloe 2017-09-25 07:42:04
la source

en ce qui concerne toutes les solutions ci-dessus, mais celle-ci semble être la plus valide en raison des spécifications HTML:

<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>

mise à jour: Pardonnez-moi pour cette réponse incorrecte, il ne s'agit certainement pas d'une solution de remplacement pour l'élément select , mais d'un titre pour les options groupées dans la liste d'éléments ouverte select .

-5
répondu dr.dimitru 2017-05-23 06:23:50
la source

Autres questions sur html css html5 html-select placeholder