Html 选择选项字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15830115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select option font-size
提问by StuBlackett
I have built this fiddleas an example of what I am doing.
我已经建立了这个小提琴作为我正在做的事情的一个例子。
What I am trying to do works fine in Firefox. With the font-size being 14pxwhen you open up the select options.
我正在尝试做的在 Firefox 中运行良好。打开选择选项时，字体大小为14px。
However looking at it in Google Chrome it picks the inherited font-size of 34px.
然而，在谷歌浏览器中查看它，它选择了34px的继承字体大小。
I am ideally looking for the select options to be font size 14px.
我理想地寻找字体大小为14px的选择选项。
Is this possible to do?
这是可能的吗？
I am willing to make any relevant fixes in jQuery should they be required.
如果需要，我愿意在 jQuery 中进行任何相关修复。
Thanks
谢谢
Code Listed Below......
代码如下......
My CSSis :
我的CSS是：
.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;
}
HTML Markup:
HTML 标记：
<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>
回答by dsgriffin
One solution could be to wrap the options inside optgroup:
一种解决方案可能是将选项包装在optgroup 中：
HTML:
HTML：
<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>
CSS:
CSS：
optgroup { font-size:14px; }
回答by David Goss
Like most form controls in HTML, the results of applying CSS to <select>and <option>elements vary a lot between browsers. Chrome, as you've found, won't let you apply and font styles to an <option>element directly --- if you do Inspect Element on it, you'll see the font-size: 14pxdeclaration is crossed through as if it's been overridden by the cascade, but it's actually because Chrome is ignoring it.
与 HTML 中的大多数表单控件一样，将 CSS 应用到<select>和<option>元素的结果因浏览器而异。正如您所发现的，Chrome 不会让您<option>直接将字体样式应用到元素 --- 如果您在其上执行 Inspect Element，您将看到font-size: 14px声明被交叉，就好像它已被级联覆盖一样，但这实际上是因为 Chrome 忽略了它。
However, Chrome willlet you apply font styles to the <optgroup>element, so to achieve the result you want you can wrap all the <option>s in an <optgroup>and then apply your font styles to a .styled-select optgroupselector. If you want the optgroup sans-label, you may have to do some clever CSS with positioning or something to hide the white area at the top where the label would be shown, but that should be possible.
不过，Chrome的将让你应用字体样式的<optgroup>元素，这样就实现你愿意，你可以换全部的结果<option>在一个s <optgroup>，然后运用你的字体样式的.styled-select optgroup选择。如果你想要 optgroup sans-label，你可能需要做一些巧妙的 CSS 定位或其他东西来隐藏顶部显示标签的白色区域，但这应该是可能的。
Forked to a new JSFiddle to show you what I mean:
分叉到一个新的 JSFiddle 向你展示我的意思：
回答by ExCluSiv3
.service-small option {
font-size: 14px;
padding: 5px;
background: #5c5c5c;
}
I think it because you used .styled-select in start of the class code.
我认为这是因为您在类代码的开头使用了 .styled-select 。
