Comment le style de la <option> uniquement avec du CSS?

Remarque: Cette question n'est pas de faire un custom menu déroulant. C'est seulement sur les possibilités de style <option> éléments au sein de la sélectionner l'élément en CSS

Comment puis-je style <option>s d'un <select> élément avec la compatibilité inter-navigateur? Je sais que beaucoup de JavaScript moyens qui personnaliser le menu pour convertir en <li>, dont je ne suis pas en demandant au sujet.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Je me demande ce qui pourrait être possible avec CSS, avec compatibilité pour IE9+, Firefox et Chrome.

Comment le style de la <option> uniquement avec du CSS?

Je veux un style comme ceci ou aussi près que possible.

Comment le style de la <option> uniquement avec du CSS?

J'ai essayé ici http://jsfiddle.net/jitendravyas/juwz3/3/, mais Chrome ne présente pas de style à l'exception de la couleur de la police, tandis que Firefox affiche un peu plus. Comment obtenir de la frontière et le rembourrage de travail en Chrome trop?

  • Il ne s'agit que d' <option> pas l'ensemble de la liste déroulante
  • Je ne suis pas sûr que ce soit la même. Cette question vous demande si vous pouvez le style de la <select> élément de l'apparence de la page. Cette question vous demande si vous pouvez le style de la liste de <option> éléments.
  • <select> et <option> sont différents. voir, par exemple, cette extension il ne de style <select> pas <option> cssglobe.com/lab/style_select/01.html
  • droit, mais il vaut la peine de la contestation dans les commentaires afin que d'autres n'ont pas aveuglément fermer sans une évaluation adéquate des deux questions elles-mêmes. Bien sûr, c'est quelque chose qu'ils devraient faire de toute façon...
  • Pour l'amour de dieu ce n'est PAS un doublon de l'un des deux liées à des questions (qui, par la façon dont sont différents l'un de l'autre). On est seul sur le style et sélectionnez pas l'option, alors que celui-ci lui demande également de style les options, et les autres n'est pas la seule-css/no-js exigence.
  • Je suis malade de voir des questions à tort marqué comme en double, ou mal fermé, en restant pendant des années, en dépit d'avoir été révélée fausse.
  • Facilement 😉 CodePen
  • L'ajout de "taille" à la balise select comme fait toutes les options visibles sans avoir à cliquer sur le select... est-il un moyen de l'éviter, et de masquer les options comme normal?
  • codepen.io/lambder/stylo/NbmwRb
  • Ce n'est pas un doublon ! Toutes les autres réponses expliquer comment le style de l'élément select quand il n'est PAS actif. Celui-ci a été d'essayer de se demander comment le style dans le menu déroulant lui-même, c'est à dire lors de la sélection est active et que la souris est pressé !

InformationsquelleAutor Jitendra Vyas | 2011-12-08
  1. 70

    ÉDITION 2015 Peut

    Avertissement: j'ai pris l'extrait de la réponse en lien ci-dessous:

    Mise À Jour Importante!

    En plus de WebKit, comme de Firefox 35 nous allons être en mesure d'utiliser le appearance propriété:

    À l'aide de -moz-appearance avec le none valeur sur une zone de liste déroulante maintenant supprimer le
    bouton de la liste déroulante

    Maintenant afin de masquer le défaut de style, c'est aussi facile que d'ajouter les règles suivantes sur notre sélectionner l'élément:

    select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

    Pour IE 11, vous pouvez utiliser [::-ms-expand][15].

    select::-ms-expand { /* for IE 11 */
    display: none;
}

    Vieille Réponse

    Malheureusement, ce que vous demandez n'est pas possible à l'aide de pur CSS. Cependant, voici quelque chose de similaire que vous pouvez choisir pour que cela fonctionne. Vérifiez le code en direct ci-dessous.

    CSS:

    div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

    HTML:

    <div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

    MODIFIER

    Ici est la question que vous avez posée il y a quelques temps.
    Comment le style d'un <select> liste déroulante avec les CSS sans JavaScript?
    Comme on dit là-bas, seulement dans le Chrome et dans une certaine mesure, dans Firefox, vous pouvez réaliser ce que vous voulez. Sinon, malheureusement, il n'y a pas de croix-navigateur pur CSS solution pour le style d'une sélection.

    • +1 merci c'est bon code. mais dans mon cas, je veux faire avec <select>. l'utilisation de <div> est pas sémantiquement correct.
    • Je sais, mais comme j'ai répondu, c'est pas possible. Ce que vous avez réalisé dans la première image est le plus que vous pouvez faire. Voir th edition. En passant, j'ai répondu à votre question précédente, veuillez voir.
    • L "important, la mise à jour" de la partie en déduit que vous pouvez style option tags avec le css, mais vous ne pouvez pas, vous ne pouvez le style de la select tag. Ce qui est indiqué dans le cette réponse
    • Voici une version JavaScript de l'exemple ci-dessus qui ajoute de rappel et quelques autres fonctionnalités utiles: dynamicdrive.com/dynamicindex1/ergodropdown.htm
    InformationsquelleAutor Savas Vedova
  2. 4

    Il n'y a pas de croix-navigateur de la manière de style option éléments, certainement pas à la mesure de votre deuxième capture d'écran. Vous pourriez être en mesure de les rendre gras, taille de police, mais qui sera à ce sujet...

    InformationsquelleAutor danwellman
  3. 2

    J'ai joué avec la sélection des éléments avant et sans écraser les fonctionnalités de JavaScript, je ne pense pas que c'est possible dans Chrome. Si vous utilisez un plugin ou écrire votre propre code CSS est un no go pour google Chrome/Safari et comme vous l'avez dit, Firefox, il y a mieux à faire avec elle.

    • Veuillez supprimer le dernier paragraphe de l'URL n'est pas accessible en ligne.
    InformationsquelleAutor cchana