Dropdown Default Styling

There has always been big differences across how different browsers handle form styling. There probably always will be - because UI design choices aren't described in the specs. Browser makers perhaps view this as one of the ways they can differentiate the user experience a bit. Select (dropdown) menus are one that is particularly weird.

When I say dropdown menu, I mean:

<select>
  <option>Apples</option>
  <option>Oranges</option>
  <option>Banannas</option>
</select>

Left completely alone by CSS, this will render consistently across browsers. On Macs, 11px Lucida Grande.

What if you change the font-family?

select {
  font-family: Cursive;
}

WebKit browsers (Safari, Chrome) will ignore you. Firefox, Opera, and IE will respect your change. The font-family won't cascade into the select though, you have to explicitly declare it on them.

What if you change the font-size?

select {
  font-size: 32px;
}

This is a fun one. In WebKit, if the font-size is between 0 and 10px, it will render the font size as 10px. From 11px to 15px, it will render as 11px, and 16px or larger it will render it as (wait for it), 14px. This behavior is similar they handle search inputs.

Firefox, Opera, and IE will respect your change but again only if explicitly declared on the select, it will not cascade.

On the left, the reigned in webkit font sizing. On the right, Firefox respecting exactly what its given.

Can you get WebKit to respect your changes?

Kinda. You can set border: 0; on the selects and it will make it look like a kinda crappy version of a dropdown but still have some UI. It will also allow your font size and style choices to come through.

border: 0; font-family: cursive;

You can also set -webkit-appearance: none; and you'll get what looks like a rounded corner input box, but still has the interactions of a select (click to reveal menu, keyboard commands, etc). It will also respect your font choices this way.

appearance: none; font-family: fantasy;

I'd say appearance is your best bet for fully custom dropdowns, but it would be WebKit only because while -moz-appearance: none; works it doesn't remove all the chrome, just some. Opera doesn't support appearance at all.

What about the dropdown itself?

As in, the thing that shows the choices when activated. As far as I know, there is no way to style these in any browser. Not even bold or italic. The closest thing to style you can get is grouping them by using . This is probably mostly a UI thing, but it might be a security thing too. You wouldn't want people doing tricky things with fonts that make it unclear what option is selected.