如何在<select>中更改<option>元素的字体大小？
如何在<select>中更改<option>元素的字体大小？
提问于 2013-04-05 17:18:03
我构建了this fiddle作为我正在做的事情的一个例子。
我正在尝试做的事情在Firefox中运行良好。当您打开选择选项时，字体大小为14px。
然而，在谷歌浏览器中，它选择了继承的34px的字体大小。
我正在寻找理想的选择选项是字体大小14px。
这有可能做到吗？
如果需要，我愿意在jQuery中进行任何相关的修复。
谢谢
下面列出的代码......
.styled-select {
overflow: hidden;
height: 74px;
float: left;
width: 365px;
margin-right: 10px;
background: url(http://i50.tinypic.com/9ldb8j.png) no-repeat right center #5c5c5c;
}
.styled-select select {
font-size: 34px;
border-radius: 0;
border: none;
background: transparent;
width: 380px;
overflow: hidden;
padding-top: 15px;
height: 70px;
text-indent: 10px;
color: #ffffff;
-webkit-appearance: none;
}
.styled-select option.service-small {
font-size: 14px;
padding: 5px;
background: #5c5c5c;
}<div class="styled-select">
<select class="service-area" name="service-area">
<option selected="selected" class="service-small">Service area?</option>
<option class="service-small">Volunteering</option>
<option class="service-small">Partnership & Support</option>
<option class="service-small">Business Services</option>
</select>
</div>
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-04-05 17:20:50
一种解决方案是将选项包装在中
optgroup { font-size:40px; }<select>
<optgroup>
<option selected="selected" class="service-small">Service area?</option>
<option class="service-small">Volunteering</option>
<option class="service-small">Partnership & Support</option>
<option class="service-small">Business Services</option>
</optgroup>
</select>
Stack Overflow用户
发布于 2013-04-05 17:35:39
与HTML中的大多数表单控件一样，将CSS应用于<select>和<option>元素的结果在不同浏览器之间差别很大。正如你已经发现的，Chrome不会让你直接将和字体样式应用于<option>元素-如果你在它上面检查元素，你会看到font-size: 14px声明被穿过，就好像它被级联覆盖了一样，但实际上是因为Chrome忽略了它。
但是，Chrome允许你将字体样式应用到 element，所以为了达到你想要的效果，你可以将所有的<option>包装在一个<optgroup>中，然后将你的字体样式应用到.styled-select optgroup选择器中。如果你想要optgroup sans- label，你可能需要做一些巧妙的CSS定位，或者在标签显示的地方隐藏顶部的白色区域，但这应该是可能的。
分叉到一个新的JSFiddle，向你展示我的意思：
Stack Overflow用户
发布于 2013-04-05 17:22:29
.service-small option {
font-size: 14px;
padding: 5px;
background: #5c5c5c;
}我这么认为是因为您在类代码的开头使用了.style-select。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15830115
复制相关文章
相似问题