小编典典

如何更改选择选项的字体大小?

css

我正在尝试设置选择选项下拉列表的样式。是否可以使选项的字体大小与默认值不同?例如,默认值:

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

不幸的是,它仅适用于Firefox。可能其他浏览器不支持<option>元素样式吗?

我测试过的浏览器:

  • Chrome:版本27.0.1453.116 m
  • IE:10
  • 的Firefox:22.0

阅读 504

收藏
2020-05-16

共1个答案

小编典典

将CSS类添加到<option>标签中以对其进行样式设置:

当前,WebKit浏览器不支持此行为,因为规范未对其定义。

2020-05-16