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

Answer 1

I've done this successfully on Chrome. Here's an example with custom font by Google Fonts.

Fiddle: http://jsfiddle.net/simple/wpHKe/

The HTML code, as yours:

I'm a custom font.
Hey me too!
Averia Libre
​

Of course, CSS:

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

And the Font Face that comes from Google:

You can see this one linked as an external style sheet, but this is the code inside it.

@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');
}

Edit:

As pointed out by @Jhilom, if you don't want this to affect all DropdDowns on your site, be sure to include a CSS Class to the Select, like so:

HTML:

1
2
3

CSS:

.yourSelectClass
{
/* Your Dropdown CSS here */
}