How to change the font size of the list (not the initial view)

Question

I have set a custom font and background for the initial view of the dropdown list (Select a choice). The font-size is 20 pixels and looks great with the custom font. However when I click on the list, the options themselves do not use the custom font and look normal, except for the font-size, which seems to carry over. This only seems to be the case with Chrome (I've tested Safari and Firefox as well).

@font-face {
    font-family: 'Averia Libre';
    font-style: normal;
    font-weight: 400;
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
    width: 400px;
    font-family: 'Averia Libre';
}

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<select>
    <option value="">I'm a custom font.</option>
    <option value="">Hey me too!</option>
    <option value="">Averia Libre</option>
</select>

I tried creating a separate class for the options themselves, but that did not seem to have any effect.

To illustrate further, here's a JSFiddle.

Chrome:

Firefox:

Answer 1

I am agreed with Peter but by the use of:

select {
  font-size: 20px;
  font-family: 'Averia Libre', cursive;
}

on the css will change all of the dropdown font so he should use class instead of total select

CSS

.selectClass {
   font-size: 25px;
   font-family: 'Impact', cursive;
}​

And HTML

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>

<select class="selectClass">
<option value="">I'm a custom font.</option>
<option value="">Hey me too!</option>
<option value="">Averia Libre</option>
</select>​

Or you may see the fiddle directly on http://jsfiddle.net/sNkDW/

Answer 2

It looks like the the dropdown list is being rendering by the "native UI" of Mac OS X.

If setting the font and/or size doesn't actually change anything, there's nothing you can do about it.

(Other than replacing the <select> with a custom JavaScript version).

Answer 3

In chrome try adding background: white; to the class Select. By setting the background to white Chrome also followed the rest of my specifications such as height and font.

.yourselectclass select {
    background: white;
    font-size: 16px;
    margin-left: 5px;
    font-family: 'Cabin', sans-serif;
    height: 30px;
    width: 88px;
}