Pur CSS solution de style spécifique <select> options dans les navigateurs basés sur webkit?

Tout simplement, est-il une manière de style spécifique, sélectionnez les options de Chrome/Safari?

Par exemple, si j'ai eu:

<select class="the-select">

<option class="header">TECHNICIANS</option>
<option>Joe Smith</option>
<option>Joe White</option>
<option class="header">PRODUCERS</option>
<option>Jane Black</option>
<option>Cindy Gray</option>

</select>

Est-il de toute façon à un style en particulier ceux des options avec la classe "en-tête"? Évidemment, dans le CSS, si vous faites cela:

select.the-select option.header {
    background-color:#ff9900;
}

Cela devrait fonctionner, et dans d'autres navigateurs, mais pas de Chrome/Safari. Est-ce juste un webkit problème et il y a aucune solution de contournement pour cette?

Merci!

EDIT: Cela semble être un OSX basé sur webkit problème de navigateur, car il semble fonctionner sur Windows. J'ai oublié de mentionner le fait que je ne peux pas utiliser optgroups parce que nous avons besoin pour être en mesure de sélectionner des options. Je suis conscient que optgroups serait la solution idéale, mais malheureusement, cela ne saurait être le cas dans cet exemple.

double possible de CSS+Sélectionnez l'Option de liste Déroulante
Cela fonctionne très bien pour moi en Chrome v28 sur Windows. C'est peut-être un MAC question.
Grâce ricovox, c'est vrai. Semble être un OSX problème de navigateur basé sur webkit rapport complet basé sur webkit problème de navigateur.

OriginalL'auteur Thomas | 2013-08-21

  1. 2

    Je suis récemment tombé sur cette technique personnalisée de style à une balise select avec uniquement du CSS.

    HTML:

    <div class="styled-select">
  <select class="the-select">
      <optgroup label="TECHNICIANS">
        <option>Joe Smith</option>
        <option>Joe White</option>
      </optgroup>
      <optgroup label="PRODUCERS">
        <option>Jane Black</option>
        <option>Cindy Gray</option>
      </optgroup>
  </select>
</div>

    CSS:

    .styled-select {
width: 342px;
    height: 30px;
    overflow: hidden;
    background: url("/img/selectarrow.png") no-repeat right;
    border: none;
    opacity: 0.8;
    background-color: #999999;
 }

.styled-select select {
  background: transparent;
  width: 342px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 16px;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  font-weight: 200;
 font-family: "lato", sans-serif;
 font-size: 18px;
 }


 .styled-select select:focus {
outline: none;
 }

    Ici un violon: http://jsfiddle.net/eshellborn/AyDms/

    Et puis juste assurez-vous que vous obtenez une image appelée "selectarrow" pour la liste déroulante en haut de l'image.

    Je ne suis pas sûr que ce soit de +1 à cette réponse que je suis venu ici avec une autre question, mais je suis très reconnaissant à vous pour souligner le <optgroup> élément, tout ce que je cherchais!
    Cela ne fonctionne pas dans google Chrome sur Mac.

    OriginalL'auteur eshellborn

  2. 0

    Si vous voulez juste pour être clairement en-têtes, l'utilisation d'une étiquette prévue à cet: < "optgroup" >. Cela peut également vous aider avec l'application de feuilles de style CSS.

    <select class="the-select">
  <optgroup label="TECHNICIANS">
    <option>Joe Smith</option>
    <option>Joe White</option>
  </optgroup>
  <optgroup label="PRODUCERS">
    <option>Jane Black</option>
    <option>Cindy Gray</option>
  </optgroup>
</select>
    Oups! J'ai oublié de mentionner que nous ne pouvons pas utiliser optgroups parce que nous avons besoin pour être en mesure de sélectionner les en-têtes.

    OriginalL'auteur Dark Falcon