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


202

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.


Pas sûr de celui-ci. Je pense que non. Vous aurez besoin de magie JavaScript (jQuery) pour que cela se produise.
Madara's Ghost

6
les options sont toujours aussi ennuyeuses à coiffer qu'elles l'ont jamais été. ce que vous voudrez peut-être utiliser est un optgroup: htmlhelp.com/reference/html40/forms/optgroup.html cela vous donnera une catégorie en gras et en italique (comme l'électronique) dans laquelle se trouvent un tas d'options.
wolv2012

Réponses:


202

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.


2
Ce comportement varie selon les différents navigateurs et les différents systèmes d'exploitation; il vaut la peine de préciser si vous parlez principalement d'IE sous Windows.
Vince Bowdren

4
Vous pouvez select > optionstyliser, mais il n'y a pas de solution de croisement fiable pour le faire et, sur Chrome au moins, vous pouvez tout au plus personnaliser la taille de la police, la famille, l'arrière-plan et la couleur de premier plan. Peut-être quelques ajustements supplémentaires, mais des choses comme le rembourrage, la couleur du survol et autres, je n'ai pas réussi à changer. En effet, il peut y avoir des alternatives, mais selon le projet, la balise <select> peut être nécessaire par exemple pour la validation angulaire ou pour une autre raison.
Felype

3
@none J'ai publié une réponse aux balises d'options de style . Il ne montre pas comment styliser <option>, mais il montre comment émuler <select>afin que vous puissiez styliser les options.
UndoingTech

3
Bien que ce soit la réponse acceptée, il est possible de styliser OPTIONavec CSS avec des navigateurs modernes - ajoutez une balise de style à l'option
Jimmery

2
Dans l'introduction des appareils mobiles, cela est encore moins stylable, car les éléments d'options ne sont même pas affichés par rapport à la sélection dans le flux de page - il est répertorié dans une section déroulante distincte en bas de l'écran - de style très différent de comment vous vous attendez dans un navigateur traditionnel.
admiration le

74

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.


donc la conclusion est: "l'option d'un select ne peut pas être partiellement stylisée uniquement avec CSS", non ??? :(
MrClan

27
Le point important ici est qu'ils ne peuvent être stylisés que très peu.
devios1

1
Pour ajouter au point de devios - la sélection native peut être de style minimal pour Windows, mais pas nécessairement pour d'autres systèmes d'exploitation. Comme le mentionne pumbo ci-dessous, vous devrez remplacer la sélection par d'autres éléments (généralement un ul) et dupliquer la fonctionnalité de sélection en JavaScript pour un contrôle total sur les styles.
Benjamin Robinson

3
<option style = "color: 'red';"> ne fonctionne pas pour moi ... suggestion?
fabio

1
style="background-color: red;color: red;"ne fonctionne pas pour moi. EDIT: Après avoir fermé la console développeur, le style a été appliqué.
Black

33

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:

entrez la description de l'image ici


2
Cela n'est vrai que parce que le sélecteur all cible les entrailles du DOM fantôme, vous pouvez les cibler manuellement par navigateur.
mystrdat

20

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

});

1
pourriez-vous s'il vous plaît poster le code ici parce que peut-être un jour il sera supprimé mais ici il restera dans le lieu de sauvegarde
Mohammad Alabed

C'est une manière très dynamique de faire ce que vous voulez avec la sélection, si vous avez une meilleure option, je serai heureux de la voir comme une réponse ici @ahnbizcad
Anahit DEV

17
Ce n'est PAS un html natif <select>, il en restitue juste un avec du code jQuery. Si vous voulez faire cela, vous pourriez aussi bien utiliser un plugin jQuery, un composant React, etc. qui gère le clavier HAUT / BAS, la saisie / recherche, etc.
John Culviner

10

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 :

entrez la description de l'image ici

entrez la description de l'image ici

entrez la description de l'image ici

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/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 existe une bibliothèque que vous pouvez utiliser appelée Select2 .

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 .

entrez la description de l'image ici

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


19
Parce que la question concerne le style de l' élément option , pas l' élément select .
Jsalinas

5
Cette réponse est trompeuse, car alors que vous montrez explicitement que vous pouvez styliser la sélection , vous prétendez que l' option est ce qui peut être stylisé, même s'il s'agit d'un élément de système d'exploitation qui n'accepte que le style CSS minimal.
Andrew Gray

@Jsalinas désolé, ma réponse précédente était atroce. Je l'ai remplacé par un que j'espère meilleur.
Katie

1
Très bonne réponse! De bons exemples!
cskwg

Select2 4.0 n'est plus pur car il s'appuie désormais sur jQuery.
galmok

9

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>
entrez la description de l'image ici


2
@ Muhamed Al Khalil: J'ai mis à jour l'exemple pour être plus clair, car l'option actuellement sélectionnée a aussi son propre style. Si cela ne fonctionne pas, je soupçonne des problèmes de compatibilité du navigateur. = \
HoldOffHunger

3
@Akash: Intéressant, cela a fonctionné sur Firefox avant la sortie de Firefox Quantum, et cela fonctionne toujours actuellement sur Chrome (60% + d'utilisateurs). Je parie que c'est un bug!
HoldOffHunger

1
Cela ne fonctionne que pour la liste déroulante, pas ce qui est affiché comme sélectionné. Dommage.
WebDude0482



2

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.


<option style = "color: 'red';"> ne fonctionne pas pour moi ... suggestion?
fabio

1
Supprimer les guillemets sur red: <option style = "color: red;">
dy_

1

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


1

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.


1

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>


1

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.


0

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]

0

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


0

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>


De l'avis: Salut, ne répondez pas seulement avec le code source. Essayez de fournir une belle description du fonctionnement de votre solution. Voir: Comment écrire une bonne réponse? . Merci
sɐunıɔ ןɐ qɐp


0

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:

entrez la description de l'image ici

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;
    }
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.