我已经建立了这个小提琴作为我在做什么的一个例子。
我正在尝试做的事情在Firefox中可以正常工作。打开选择选项时,字体大小为 14px 。
但是,在Google Chrome浏览器中查看它会选择继承的font-size为 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 & 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 & Support</option> <option class="service-small">Business Services</option> </optgroup>
CSS:
optgroup { font-size:14px; }