選択肢のフォントサイズを変更するにはどうしたらいいですか？

選択肢付きドロップダウンリストのスタイルを決めようとしています。選択肢のフォントサイズをデフォルト値とは異なるものにすることは可能でしょうか？ 例えば、デフォルトでは

-- Select Country --

はサイズ7pt;で、オプションの1つは

Georgia

はサイズ13ptになります。

これは私のドロップダウンリストです。

.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>

私の[JSFiddleでのデモ](http://jsfiddle.net/VggvD/50/)もご覧ください。

残念ながら、Firefoxでしか動作しません。他のブラウザでは<option>要素のスタイリングがサポートされていないのではないでしょうか？

テストしたブラウザは

  • Chromeです。バージョン27.0.1453.116m
  • IE：10
  • Firefox22.0
TylerH
編集された質問 17日 11月 2017 в 10:04
プログラミング
css3 font-size css html-select
2日 7月 2013 в 7:33
20 ビュー
ソリューション

``タグにCSSクラスを追加してスタイルを設定します。[http://jsfiddle.net/Ahreu/](http://jsfiddle.net/Ahreu/50/)

現在、WebKitブラウザはこの動作をサポートしていません。これを参考にしてください。How to style a select tag's option element?.

TylerH
編集した答え 17日 11月 2017 в 10:06
解説 (4)

オプション要素を13ptにする

select option{
    font-size: 13pt;
}

そして、最初のオプション要素を7ptにします。

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

実行中のデモ: http://jsfiddle.net/VggvD/1/

解説 (3)

試しに

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

CSSはあなたのコードを追加します。

.select_join option{
    font-size:13px;
}
Falguni Panchal
編集した答え 2日 7月 2013 в 8:37
解説 (1)