html – 选择字体大小

前端之家收集整理的这篇文章主要介绍了html – 选择字体大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经建立了 this fiddle作为我正在做的一个例子。

我想做的工作在Firefox中工作正常。当您打开选择选项时,font-size为14px。

然而,在Google Chrome浏览器中,它会选择继承的字体大小为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>

解决方法

一个解决方案可能是在 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; }

猜你在找的HTML相关文章