如何更改选择选项的字体大小? [英] How can I change the font-size of a select option?

问题描述

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

I am trying to style a select option dropdown list. Is it possible to make the font-sizes of the options different from the default value? For example, the default:

-- Select Country --  

尺寸为7pt；和其中一个选项，

Would be size 7pt; and one of the options,

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的演示.

不幸的是，它仅在Firefox上有效.可能是其他浏览器不支持<option>元素的样式吗?

Unfortunately, it works only on Firefox. Could it be that others browser don't support styling of <option> elements?

我测试过的浏览器:

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

推荐答案

在<option>标记中添加CSS类以对其进行样式设置: http://jsfiddle.net/Ahreu/​​

Add a CSS class to the <option> tag to style it: http://jsfiddle.net/Ahreu/

当前，WebKit浏览器不支持此行为，因为该行为未由规范定义.看看以下内容:如何设置选择标签的选项元素的样式?

Currently WebKit browsers don't support this behavior, as it's undefined by the spec. Take a look at this: How to style a select tag's option element?

这篇关于如何更改选择选项的字体大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！