Wie kann ich die Schriftgröße einer Auswahloption ändern?

Ich versuche, eine Dropdown-Liste mit Auswahloptionen zu gestalten. Ist es möglich, die Schriftgröße der Optionen vom Standardwert zu unterscheiden? Zum Beispiel der Standardwert:

-- Select Country --

wäre die Größe 7pt; und eine der Optionen,

Georgia

würde die Größe 13pt haben.

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 meine [Demo auf JSFiddle](http://jsfiddle.net/VggvD/50/).

Leider funktioniert es nur auf Firefox. Könnte es sein, dass andere Browser das Styling von <option> Elementen nicht unterstützen?

Browser, auf denen ich getestet habe:

  • Chrome: Version 27.0.1453.116 m
  • IE: 10
  • Firefox: 22.0
TylerH
Bearbeitete Frage 17. November 2017 в 10:04
Programmierung
css3 font-size css html-select
2. Juli 2013 в 7:33
16 Aufrufe
Lösung

Fügen Sie dem Tag `` eine CSS-Klasse hinzu, um ihn zu gestalten: [http://jsfiddle.net/Ahreu/](http://jsfiddle.net/Ahreu/50/)

Derzeit unterstützen WebKit-Browser dieses Verhalten nicht, da es in der Spezifikation nicht definiert ist. Werfen Sie einen Blick auf dies: How to style a select tag's option element?

TylerH
Bearbeitete Antwort 17. November 2017 в 10:06
Kommentare (4)

Sagen Sie dem Optionselement, dass es 13pt sein soll

select option{
    font-size: 13pt;
}

und dann das erste Optionselement auf 7pt setzen

select option:first-child {
    font-size: 7pt;
}

Laufende Demo: http://jsfiddle.net/VggvD/1/

Kommentare (3)

Versuchen Sie dies

http://jsfiddle.net/VggvD/2/

CSS fügen Sie Ihren Code hinzu

.select_join option{
    font-size:13px;
}
Falguni Panchal
Bearbeitete Antwort 2. Juli 2013 в 8:37
Kommentare (1)