选择选项字体大小

我已经建立this fiddle为我做的一个例子。选择选项字体大小

我所试图做的Firefox中正常工作。当您打开选择选项时，字体大小为14px。

然而，在谷歌浏览器中查看它会选择继承的字体大小34px。

我理想的选择是选择字体大小14px。

这可能吗？

我愿意在任何jQuery的相关修复程序，应符合规定。

感谢

上市下面

代码......

我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标记：

<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 &amp; Support</option> 
     <option class="service-small">Business Services</option> 
    </select> 
</div>

来源

2013-04-05 StuBlackett

的可能的复制[？如何风格选择标签的选项元素（http://stackoverflow.com/questions/5887133/how-to -style-a-select-tags-option-element） – TylerH 2015-11-29 23:40:33

一种解决方案可能去w说唱内optgroup选项：

HTML：

<optgroup> 
    <option selected="selected" class="service-small">Service area?</option> 
    <option class="service-small">Volunteering</option> 
    <option class="service-small">Partnership &amp; Support</option> 
    <option class="service-small">Business Services</option> 
</optgroup>

CSS：

optgroup { font-size:14px; }

来源

2013-04-05 09:20:49 lifetimes

太棒了。可能是我的下一个想法。感谢那 – StuBlackett 2013-04-05 09:27:36

只适用于FF – 2013-08-23 00:25:56

它在Chrome（v28我相信），Safari，IE等当时工作。我将不得不尝试找出它的错误报告是 – lifetimes 2015-04-23 21:58:33

.service-small option { 
    font-size: 14px; 
    padding: 5px; 
    background: #5c5c5c; 
}

我想这是因为你用过.styled选在类的开始码。

来源

2013-04-05 09:22:29 ExCluSiv3

与HTML中的大多数表单控件一样，将CSS应用于<select>和<option>元素的结果在浏览器之间差异很大。 Chrome浏览器不会让您直接将字体样式应用于<option>元素---如果您对其执行检查元素，则会看到font-size: 14px声明被越过，就好像它已被覆盖级联，但实际上是因为Chrome无视它。

不过，Chrome的将让你应用字体样式的<optgroup> element，这样就实现你愿意，你可以包装在<optgroup>所有<option>秒，然后运用你的字体样式到选择的结果。如果你想要optgroup sans-label，你可能不得不做一些聪明的CSS来定位或者在顶部显示标签的地方隐藏白色区域，但这应该是可能的。

分叉到一个新的jsfiddle向你展示我的意思：

http://jsfiddle.net/zRtbZ/

来源

2013-04-05 09:35:38

您试图在风格选改变选项的字体。你需要改变的是选项的字体在选择在风格选择。

.styled-select select > option.service-small{ 
    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; 
}

来源

2015-06-19 05:39:08