如何更改< option>的字体大小. < select>中的元素? [英] How do I change the font-size of an <option> element within <select>?

问题描述

我已经构建了此小提琴作为我在做什么的示例.

I have built this fiddle as an example of what I am doing.

我正在尝试做的事情在Firefox中可以正常工作.打开选择选项时，字体大小为 14px .

What I am trying to do works fine in Firefox. With the font-size being 14px when you open up the select options.

但是，在Google Chrome浏览器中，它会选择继承的字体大小 34px .

However looking at it in Google Chrome it picks the inherited font-size of 34px.

理想情况下，我正在寻找选择选项，将字体大小设置为 14px .

I am ideally looking for the select options to be font size 14px.

这可能吗?

如果需要，我愿意在jQuery中进行任何相关的修复.

I am willing to make any relevant fixes in jQuery should they be required.

谢谢

下面列出的代码...

Code Listed Below......

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

推荐答案

一种解决方案是将选项包装在

One solution could be to wrap the options inside optgroup:

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

这篇关于如何更改< option>的字体大小. < select>中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！