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

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