How do I change the font-size of an <option> element within <select>?
02:59 05 Apr 2013

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

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