我正在尝试设置选择选项下拉列表的样式。是否可以使选项的字体大小与默认值不同?例如,默认值:
-- 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>元素样式吗?
<option>
我测试过的浏览器:
将CSS类添加到<option>标签中以对其进行样式设置:
当前,WebKit浏览器不支持此行为,因为规范未对其定义。