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

The CSS styling of the text inside the option tags cannot be changed in Firefox.

In Firefox: Only the "selected" element in the drop down combo box respects any CSS styling you apply. The style does not cascade down to the option tags. Adding CSS style to each option tag has no effect.

In Chrome: Chrome respects the CSS styling you add to the select and option tags. The style does not cascade down from the select tag to the option tags, but you can apply style to each option tag.

I've read that "the standard" does not require the select and option tags to be stylable.

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

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:

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

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:

<select class="yourSelectClass">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

CSS:

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

Answer 4

I have faced the same issue. Actually its not an issue. The select menu size appears based on the list item text length. Check your option label

Ex: If you have lengthy text in the option tags then the select menu font size will be small.

Answer 5

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;
}

Answer 6

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/