我怎样才能改变选择选项的字体大小？

我正在试图设计一个下拉列表的选项样式。是否可以使选项的字体大小与默认值不同？ 比如说，默认值。

-- Select Country --

将是7pt大小；而其中一个选项。

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>

<！--结束片段--&gt。

也请看我的[JSFiddle上的演示](http://jsfiddle.net/VggvD/50/)。

不幸的是，它只在Firefox上工作。会不会是其他浏览器不支持<option>元素的样式设计？

我测试过的浏览器。

  • 浏览器。版本 27.0.1453.116 m
  • IE: 10
  • 火狐浏览器22.0
TylerH
已编辑的问题 17日 十一月 2017 в 10:04
编程
css3 font-size css html-select
2日 七月 2013 в 7:33
14 种观点
解决办法

在``标签上添加一个CSS类，使其具有风格。[http://jsfiddle.net/Ahreu/](http://jsfiddle.net/Ahreu/50/)

目前WebKit浏览器不支持这种行为，因为它没有被规范所定义。看一下这个。[如何为选择标签的选项元素设置样式？

TylerH
编辑本段答案17日 十一月 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日 七月 2013 в 8:37
评论(1)