Voici mon HTML:

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

Je souhaite mettre en gras le nom du produit (c'est-à-dire «Product1», «Product2», etc.) et ses catégories (à savoir Electronique, Sports, etc.) en italique, en utilisant uniquement CSS. J'ai trouvé une vieille question qui mentionnait qu'il n'était pas possible d'utiliser HTML et CSS, mais j'espère qu'il y a une solution maintenant.

Seuls quelques attributs de style peuvent être appliqués à un <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 stylisé via CSS.

Il existe des plug-ins / bibliothèques de remplacement qui ressemblent à un, <select>mais sont en fait composés d' HTMLéléments réguliers qui PEUVENT être stylisés.

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 :

À l'exception de background-coloret color, les paramètres de style appliqués via l'objet style pour l'élément option sont ignorés.

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

En utilisant la balise * CSS, vous pouvez styliser les options à l'intérieur de la boîte dessinée par le système.

Exemple:

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

Cela ressemblera à ceci:

J'ai trouvé et utilisé ce bon exemple de style des sélections et des options.Vous pouvez faire avec cette sélection tout ce que vous voulez.Voici le violon

html

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

css

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

JS

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

});

Voici quelques façons de <option>styliser avec <select>si vous utilisez Bootstrap et / ou jquery. Je comprends que ce n'est pas ce que l'affiche originale demande, mais j'ai pensé que je pourrais aider les autres qui tombent sur cette question.

Vous pouvez toujours atteindre l'objectif de styliser chacun <option>séparément, mais vous devrez peut-être également appliquer un certain style à <select>. Mon préféré est la bibliothèque "Bootstrap Select" mentionnée ci-dessous.

Bibliothèque Bootstrap Select (jquery)

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

Notez que vous pouvez styliser l' selectélément entier ou les optionéléments séparément.

Exemples :

Dépendances : nécessite jQuery v1.9.1 +, Bootstrap , le composant dropdown.js de Bootstrap et le CSS de Bootstrap

Compatibilité : incertain, mais bootstrap dit qu'il "prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes"

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/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 existe une bibliothèque que vous pouvez utiliser appelée Select2 .

Dépendances : la bibliothèque est JS + CSS + HTML uniquement (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 .

Aucun exemple 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 d'amorçage:

$(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 . (Ceci est 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 conception Matériau .

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

Dépendances : Bootstrap 4 , JQuery,

Compatibilité : "prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes."

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

On dirait que je peux simplement définir le CSS pour selectChrome directement. Code CSS et HTML fourni ci-dessous:

.boldoption {
	font-weight: bold;
}

<select>
	<option>Some normal-font option</option>
	<option>Another normal-font option</option>
	<option class="boldoption">Some bold option</option>
</select>

Comme déjà mentionné, la seule façon est d'utiliser un plugin qui remplace <select> fonctionnalité.

Une liste des plugins jQuery: http://plugins.jquery.com/tag/select/

Jetez un œil à l'exemple utilisant le Select2plugin: http://jsfiddle.net/swsLokfj/23/

Bootstrap vous permet d'utiliser le style via le contenu des données:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

Exemple: https://silviomoreto.github.io/bootstrap-select/examples/

Certaines propriétés peuvent être stylisées pour la <option>balise:

• font-family
• color
• font-*
• background-color

Vous pouvez également utiliser une police personnalisée pour une <option>balise individuelle , par exemple n'importe quelle police google , icônes de matériaux ou autres polices d' icônes d' icomoon ou similaires. (Cela peut être utile pour les sélecteurs de polices, etc.)

Compte tenu de cela, vous pouvez créer une pile de familles de polices et insérer des icônes dans les <option>balises, par exemple.

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

d'où ★vient Iconset le reste vient Roboto.

Notez cependant que les polices personnalisées ne fonctionnent pas pour la sélection mobile.

En fait, vous pouvez ajouter: avant et: après et les styliser. Au moins c'est quelque chose

option{
    font-size:18px;
    background-color:#ffffff;
}
option:before{
    content: ">";
    font-size:20px;
    display:none;
    padding-right:10px;
    padding-left:5px;
    color:#fff;
}
option:hover:before{
    display:inline;
}

Nous sommes en 2017 et il est possible de cibler des options de sélection spécifiques. Dans mon projet, j'ai un tableau avec une classe = "variations" , et les options de sélection sont dans la cellule du tableau td = "value" , et la sélection a un ID select # pa_color . L'élément option a également une classe option = "attaché" (entre autres balises de classe). Si un utilisateur est connecté en tant que client grossiste, il peut voir toutes les options de couleur. Mais les clients de détail ne sont pas autorisés à acheter 2 options de couleur, je les ai donc désactivées

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

Cela a pris un peu de logique, mais voici comment j'ai ciblé les options de sélection désactivées.

CSS

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

Avec cela, mes options de couleur ne sont visibles que pour les clients en gros.

Laissant ici une alternative rapide, en utilisant la bascule de classe sur une table. Le comportement est très similaire à celui d'une sélection, mais peut être stylisé avec une transition, des filtres et des couleurs, chaque enfant individuellement.

function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}

#store {
  overflow-y: scroll;
  max-height: 110px;
  max-width: 50%
 }
 
.hidden {
  display: none
 }
 
.viewfull {
  display: block
}

#store :nth-child(4) {
  background-color: lime;
}

span {font-size:2rem;cursor:pointer}

<span onclick="toggleSelect()">⮋</span>
 <div id="store" class="hidden">
 
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
 
 </div>

Vous pouvez utiliser des styles en ligne pour ajouter un style personnalisé aux <option>balises.

Par exemple: <option style="font-weight:bold;color:#09C;">Option 1</option> cela appliquera les styles à cet <option>élément particulier uniquement.

Ensuite, vous pouvez utiliser un peu de magie javascript pour appliquer les styles en ligne à tous les <option>éléments d'une <select>balise comme suit:

var select = $(document).getElementById('#select-element-id')

var option = select.children('#option-element-id')

option.css('font-weight', 'bold')

option.css('font-size', '24px')

Vous pouvez également utiliser <option value="" disabled> <br> </option>pour ajouter un saut de ligne entre les options.

Cet élément est rendu par le système d'exploitation, pas HTML. Il ne peut pas être stylisé via CSS.

	$(function() {
    var clicky;
    var t=0;
    $(document).mousedown(function(e) {
        clicky = $(e.target);
    });
    $(document).mouseup(function(e) {
        clicky = null;
    });

    $("select").focusout(function(e) {
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
        	$(this).parents().children("span.selected").html(clicky.html());
        	$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
		}
        
        $(this).parents().children("span.lists").html('');
        

    });
    $('select > option').text(function(i, text) {
				var attr = $(this).attr('selected');
				if (typeof attr !== typeof undefined && attr !== false) {
        				$(this).parents().parents().children("span.selected").html(text);
				}
	});

		$("select").focusin(function(){
			$(this).children('option').text(function(i, text) {
    			$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
				});
		});

	});

select {
  width: 0px;
  height: 0px;
  overflow:hidden;
  outline: none;
  border: none;
  appearance:none;
  -moz-appearance: none;

}
label{
	display: inline-block;
	padding: 5px 10px;
	position: relative;
	width: 100px;
	height: 20px;
	background-color:#ccc;

}
label .selected{
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
label span.lists{
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	box-shadow: 0px 0px 2px 0px #ccc;
	background-color:#fff;
	z-index: 9;
}
label span.item{
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>item 2</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

essayez cela peut vous aider

[ https://codepen.io/venu9l/pen/jeNXzY][1]

Vous pouvez ajouter une classe et donner un poids de police: 700; en option. Mais en utilisant cela, tout le texte deviendra en gras.

Cela fonctionnera certainement. L'option de sélection est rendue par OS et non par html. C'est pourquoi le style CSS n'a pas d'effet, .. généralement option{font-size : value ; background-color:colorCode; border-radius:value; }
cela fonctionnera, mais nous ne pouvons pas personnaliser le remplissage, la marge, etc.

Le code ci-dessous fonctionne à 100% pour personnaliser la balise de sélection tirée de cet exemple

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
  });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

Même s'il n'y a pas beaucoup de propriétés à modifier, mais vous ne pouvez obtenir le style suivant qu'avec css:

HTML:

<div class="options">
    <select>
        <option value="">Apple</option>
        <option value="">Banana</option>
        <option value="">Orange</option>
        <option value="">Mango</option>
    </select>
</div>

CSS:

.options {

    border: 1px solid #e5e5e5;
    padding: 10px;

    select {
        font-size: 14px;
        border: none;
        width: 100%;
        background: white;
    }
}