Diese Frage hat hier bereits eine Antwort:

Wie wird das Optionselement eines ausgewählten Tags formatiert? 5 Antworten

Ich versuche, eine Dropdown-Liste mit ausgewählten Optionen zu erstellen. Können die Schriftgrößen der Optionen vom Standardwert abweichen? Zum Beispiel der Standardwert:

-- Select Country --  

Würde Größe 7pt sein; und eine der Optionen,

Georgia

Würde Größe 13pt sein.

Dies ist meine Dropdown-Liste:

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}

<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

Siehe auch meindemo auf JSFiddle.

Leider funktioniert es nur unter Firefox. Könnte es sein, dass andere Browser das Stylen von @ nicht unterstütz<option> elements?

Browsers, die ich getestet habe:

Chrome: Version 27.0.1453.116 mIE: 10Firefox: 22.0