选择选项字体大小 [英] select option font-size

问题描述

我已经建立了这个小提琴作为我所做的一个例子。

我想要做的工作在Firefox中很好。

然而，在Google Chrome浏览器中，它会选择继承的字体，因为字体大小为 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-areaname =service-area> 
< option selected =selectedclass =service-small>服务区？< / option> 
< option class =service-small> Volunteering< / option> 
< option class =service-small> Partnership& amp;支持< / option> 
< option class =service-small>商务服务< / option> 
< / select> 
< / div> 
  

解决方案

href =http://www.w3schools.com/tags/tag_optgroup.asp> optgroup ：

HTML：

 < optgroup& 
< option selected =selectedclass =service-small>服务区？< / option> 
< option class =service-small> Volunteering< / option> 
< option class =service-small> Partnership& amp;支持< / option> 
< option class =service-small>商务服务< / option> 
< / optgroup> 
  

CSS：

  optgroup {font-size：14px; } 
  

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

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

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

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

Is this possible to do?

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

Thanks

Code Listed Below......

My CSS is :

.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 :

<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:

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; }

这篇关于选择选项字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！