Comment styliser l'option d'un élément html "select" ?

Question

Voici mon HTML :

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Je veux rendre le nom du produit (i.e. 'Product1', 'Product2', etc) en gras, et ses catégories (viz. Electronics, Sports, etc) en italique, en utilisant uniquement CSS. J'ai trouvé une ancienne question qui mentionnait que ce n'est pas possible en utilisant HTML et CSS, mais j'espère qu'il y a une solution maintenant.

Answer 1

Il n'y a que quelques attributs de style qui peuvent être appliqués à un fichier de type <option> élément.

En effet, ce type d'élément est un exemple d'"élément remplacé". Ils dépendent du système d'exploitation et ne font pas partie du HTML/navigateur. Il ne peut pas être stylé via CSS.

Il existe des plug-ins/librairies de remplacement qui ressemblent à une <select> mais sont en fait composés d'éléments HTML ordinaires qui CAN être coiffé.

Answer 2

Non, ce n'est pas possible, car le style de ces éléments est géré par le système d'exploitation de l'utilisateur. MSDN répondra à votre question ici :

Sauf pour background-color y color Les paramètres de style appliqués par l'intermédiaire de l'objet style pour l'élément option sont ignorés.

Answer 3

Vous pouvez styliser les éléments de l'option dans une certaine mesure.

Utilisation de la * Le sélecteur CSS vous permet de styliser les options à l'intérieur de la boîte qui est dessinée par le système.

Exemple :

#ddlProducts *
{
 border-radius: 15px;
 background-color: red;
}

Cela ressemblera à ceci :

Answer 4

J'ai trouvé et utilisé ce bon exemple de style pour les sélections et les options. Vous pouvez faire tout ce que vous voulez avec cette sélection. Violon

// Iterate over each select element
$('select').each(function() {

  // Cache the number of options
  var $this = $(this),
    numberOfOptions = $(this).children('option').length;

  // Hides the select element
  $this.addClass('s-hidden');

  // Wrap the select element in a div
  $this.wrap('<div class="select"></div>');

  // Insert a styled div to sit over the top of the hidden select element
  $this.after('<div class="styledSelect"></div>');

  // Cache the styled div
  var $styledSelect = $this.next('div.styledSelect');

  // Show the first select option in the styled div
  $styledSelect.text($this.children('option').eq(0).text());

  // Insert an unordered list after the styled div and also cache the list
  var $list = $('<ul />', {
    'class': 'options'
  }).insertAfter($styledSelect);

  // Insert a list item into the unordered list for each select option
  for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  // Cache the list items
  var $listItems = $list.children('li');

  // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
  $styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.styledSelect.active').each(function() {
      $(this).removeClass('active').next('ul.options').hide();
    });
    $(this).toggleClass('active').next('ul.options').toggle();
  });

  // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
  // Updates the select element to have the value of the equivalent option
  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    /* alert($this.val()); Uncomment this for demonstration! */
  });

  // Hides the unordered list when clicking outside of it
  $(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
  });

});

body {
  padding: 50px;
  background-color: white;
}

.s-hidden {
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font: normal 11px/22px Arial, Sans-Serif;
  color: black;
  border: 1px solid #ccc;
}

.styledSelect {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  padding: 0 10px;
  font-weight: bold;
}

.styledSelect:after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-color: black transparent transparent transparent;
  position: absolute;
  top: 9px;
  right: 6px;
}

.styledSelect:active,
.styledSelect.active {
  background-color: #eee;
}

.options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
  border: 1px solid #ccc;
  background-color: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.options li {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
}

.options li:hover {
  background-color: #39f;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="selectbox1">
  <option value="">Select an option&hellip;</option>
  <option value="aye">Aye</option>
  <option value="eh">Eh</option>
  <option value="ooh">Ooh</option>
  <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
  <option value="">Month&hellip;</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>

Answer 5

Voici quelques exemples de style <option> ainsi que le <select> si vous utilisez Bootstrap et/ou jquery. Je comprends que ce n'est pas la question posée par l'auteur de l'article original, mais j'ai pensé que je pourrais aider les autres qui tomberaient sur cette question.

Vous pouvez toujours atteindre l'objectif de styliser chaque <option> séparément, mais il peut être nécessaire d'appliquer un certain style aux <select> également. Ma préférée est la bibliothèque "Bootstrap Select" mentionnée ci-dessous.

---

Bibliothèque Bootstrap Select (jquery)

Si vous utilisez déjà bootstrap, vous pouvez essayer l'option Bootstrap Select bibliothèque ou la bibliothèque ci-dessous (puisqu'elle a un thème bootstrap).

Notez que vous pouvez styliser l'ensemble de la select ou l'élément option éléments séparément.

Exemples :

Dépendances Il faut jQuery v1.9.1+, Bootstrap le composant dropdown.js de Bootstrap et le CSS de Bootstrap.

Compatibilité : Pas sûr, mais bootstrap dit qu'il "prend en charge les dernières versions stables de tous les principaux navigateurs et plateformes".

Démo : https://developer.snapappointments.com/bootstrap-select/examples/

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

---

Select2 (JS lib)

Il y a une bibliothèque que vous pouvez utiliser appelée Sélectionner2 .

Dépendances : La bibliothèque est uniquement JS + CSS + HTML (ne nécessite pas JQuery).

Compatibilité : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+.

Démo : https://select2.org/getting-started/basic-usage

Il y a aussi un thème bootstrap disponible.

Pas d'exemple de Bootstrap :

$(function() {
  var $select = $('.select2');

  $select.select2({
    theme: 'paper'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

Exemple de Bootstrap :

$(function() {
  var $select = $('.select2');

  $select.select2({
    theme: 'paper'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

---

MDBootstrap ($ & Bootstrap & JQuery)

Si vous avez de l'argent supplémentaire, vous pouvez utiliser une bibliothèque premium. MDBootstrap . (Il s'agit d'un Kit d'interface utilisateur complet donc ce n'est pas léger)

Cela vous permet de styliser vos éléments de sélection et d'option à l'aide de la balise Conception matérielle .

Il existe une version gratuite, mais elle ne vous permet pas d'utiliser le joli design Material !

Dépendances : Bootstrap 4 JQuery,

Compatibilité : "supporte les dernières versions stables de tous les principaux navigateurs et plateformes."

Démo : https://mdbootstrap.com/docs/jquery/forms/select/#color