Question

我已经构建了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>

Answer 1

一种解决方案可能是将选项包装在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; }

Answer 2

与HTML中的大多数表单控件一样，将CSS应用于<select>和<option>元素的结果在浏览器之间差异很大。正如您所发现的，Chrome不允许您直接将{和[{1}}元素应用于字体样式 - 如果您在其上执行Inspect Element，您将看到<option>声明已被越过通过好像被级联覆盖，但实际上是因为Chrome忽略了它。

但是，Chrome 将允许您将字体样式应用于<optgroup> element，因此要获得您想要的结果，您可以将font-size: 14px包裹在{{1}中然后将您的字体样式应用于<option>选择器。如果你想要optgroup sans-label，你可能需要做一些带定位的聪明的CSS或者隐藏顶部显示标签的白色区域，但这应该是可能的。

分叉到一个新的JSFiddle，告诉你我的意思：

http://jsfiddle.net/zRtbZ/

Answer 3

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

我认为是因为您在类代码的开头使用了.styled-select。

选择选项font-size

3 个答案: