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

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

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

Il a fallu 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.

Answer 2

Je laisse ici une alternative rapide, en utilisant une classe à bascule sur un tableau. Le comportement est très similaire à celui d'un select, mais peut être stylé avec des transitions, 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>

Answer 3

Vous pouvez utiliser les styles en ligne pour ajouter un style personnalisé à l'image de l'entreprise. <option> tags.

Par exemple : <option style="font-weight:bold;color:#09C;">Option 1</option> Ceci appliquera les styles à cette <option> uniquement.

Ensuite, vous pouvez utiliser un peu de magie javascript pour appliquer les styles en ligne à tous les fichiers <option> à l'intérieur d'un <select> étiquette 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.

Answer 4

Bien qu'il ne soit pas possible de styliser l'élément sélectionné, vous pouvez trouver quelques effets de liste déroulante ici. EFFETS SIMPLES POUR LES LISTES DÉROULANTES en utilisant des trasitions jquery et css pour les principaux navigateurs.

plus sur dop-down , un peu de fantaisie

Answer 5

Cet élément est rendu par le système d'exploitation, et non par le HTML. Il ne peut pas être stylé 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 ceci, cela peut vous aider

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