Comment styler l’option d’un fichier HTML “select”?

Voici mon HTML:

 Product1 : Electronics  Product2 : Sports   

Maintenant, ce que je veux, c’est que le nom du produit (c.-à-d. «Product1», «Product2», etc.) soit en gras et ses catégories (par exemple, Electronics, Sports, etc.) en italique, en utilisant css uniquement. J’ai trouvé une question similaire à propos d’un an, mais comme mentionné ici, ce n’est tout simplement pas possible en utilisant HTML et CSS. J’espère qu’il y a une solution maintenant. Tout indice, bizarrerie ou astuce serait apprécié. Merci.

En général, vous ne pouvez pas. Cet élément est rendu par le système d’exploitation et non par HTML . Il ne peut pas être stylé via CSS . Il existe des plug-ins de remplacement qui ressemblent à un mais qui sont en réalité composés d’éléments HTML normaux qui peuvent être stylé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épond à votre question ici :

À l’exception de la background-color d’ background-color et de la color , les parameters de style appliqués via l’object de style pour l’élément d’option sont ignorés.

Vous pouvez styler les éléments d’options dans une certaine mesure.

En utilisant la balise * CSS, vous pouvez définir les options à l’intérieur de la zone dessinée par le système.

Exemple:

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

Cela ressemblera à ceci:

entrer la description de l'image ici

J’ai trouvé et utilisé ce bon exemple du style des sélections et des options.Vous pouvez faire avec ce sélectionner tout ce que vous voulez.Voici

html

   

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('
'); // Insert a styled div to sit over the top of the hidden select element $this.after('
'); // 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 = $('
    ', { 'class': 'options' }).insertAfter($styledSelect); // Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) { $('
  • ', { 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(); }); });

    EDIT: J’ai trouvé cette géniale bibliothèque qui remplace l’élément standard “select” en HTML par des éléments “select” très stylés : Select2https://select2.github.io/examples.html


    En 2011, vous n’avez peut-être pas été en mesure de personnaliser l’élément “option”, mais c’est en 2015! Vous pouvez totalement le styler! Je ne comprends pas certaines des réponses de 2014 en disant que vous ne pouvez pas le coiffer! CSS3 fait des merveilles. J’ai essayé ceci dans mon propre code, et les “options” de la liste déroulante ont été conçues exactement comme vous le feriez

    http://cssdeck.com/labs/styling-select-box-with-css3

    Voici un exemple de code!

     select { padding:3px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: black; color:#888; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } 

    Travaille pour moi:

     .boldoption { font-weight: bold; } 
      

    Comme déjà mentionné, le seul moyen est d’utiliser un plug-in qui remplace la fonctionnalité .

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

    Jetez un oeil à l’exemple en utilisant le plugin Select2 : http://jsfiddle.net/swsLokfj/23/

    Bootstrap vous permet d’utiliser le style via le contenu de données:

      

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

    Laissant ici une alternative rapide, en utilisant la bascule de classe sur une table. Le comportement est très similaire à une sélection, mais peut être stylé avec la transition, les filtres et les 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} 
       

    Certaines propriétés peuvent être stylées pour la :

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

    Vous pouvez également utiliser une police personnalisée pour une individuelle, par exemple, une police google , des icons de matériau ou d’autres fonts d’ icomoon ou similaires. (Cela peut être pratique pour les sélecteurs de fonts, etc.)

    Compte tenu de cela, vous pouvez créer une stack de fonts de caractères et insérer des icons dans les balises , par exemple.

       

    provient des Icons et le rest de Roboto .

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

    Nous sums en 2017 et il est possible de cibler des options spécifiques. Dans mon projet, j’ai une table avec class = “variations” , et les options de sélection se trouvent dans la cellule de table td = “value” , et la sélection a un identifiant select # pa_color . L’élément option a également une option de classe = “related” (parmi d’autres balises 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 couleurs, alors je les ai désactivées

       

    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 par les clients grossistes.

    En fait, vous pouvez append: avant et: après et les coiffer. 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; } 

    Vous pouvez utiliser des styles en ligne pour append du style custome aux balises .

    Par exemple: Cela appliquera uniquement les styles à cet élément particulier.

    Ensuite, vous pouvez utiliser un peu de magie javascript pour appliquer les styles en ligne à tous les éléments une 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 pour append un saut de ligne entre les options.

    Comme indiqué ci-dessus, pas vraiment possible; Cependant, si vous souhaitez simplement définir l’état initial de quelque chose comme une option “Sélectionner un produit …” avant qu’un utilisateur n’interagisse avec le champ, vous pouvez faire quelque chose comme ci-dessous –

    L’exemple ci-dessous stylise (techniquement tout) la première option en rouge et une fois qu’un utilisateur interagit, il supprimera cette option (qui a la valeur = “defaultValue”) et supprimera la classe appliquée à la sélection. Vous pouvez également appliquer d’autres options en plus de la couleur, mais elles n’affecteront le champ qu’une fois modifié, et non la vue liste.

    CSS

     .default-value{ color: red; } 

    jQuery

     $("select").addClass('default-value'); $("select").bind("focus", function () { $(this).children('option[value="defaultValue"]').remove(); $(this).removeClass('default-value'); });