html - select option font-size -
i have built this fiddle example of doing.
what trying works fine in firefox. font-size being 14px when open select options.
however looking @ in google chrome picks inherited font-size of 34px.
i ideally looking select options font size 14px.
is possible do?
i willing make relevant fixes in jquery should required.
thanks
code listed below......
my 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 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 & support</option> <option class="service-small">business services</option> </select> </div>
one solution wrap 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 & support</option> <option class="service-small">business services</option> </optgroup>
css:
optgroup { font-size:14px; }
Comments
Post a Comment