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

What if you want to complete design control?

First, try everything you can to make that not necessary. Default form elements are familiar and work well. Making a dropdown menu match the font and colors of your brand isn't usually necessary and is more likely obnoxious at best and bad UX at worst.

If you decide that it's absolutely a good idea to customize a dropdown, then you should use JavaScript to:

1. Accessibly hide the original select.


2. Rebuild the select with custom markup (probably a definition list), that you style how you want.


3. Replicate all the functionality that default selects have, which include: keyboard events like up and down arrow keys and return to select, scrolling of long lists, opening the menu upwards when select is against bottom of screen, to name a few.


4. For mobile, trigger the opening of the native select menu, because that functionality is just about impossible to replicate. For example, the iOS flipwheel.


5. You might want to consider a "clickthrough" style for desktop as well. Have the select be custom styled by default, but when you click it, it opens the native dropdown menu (in place). When you select an option it displays the custom styling again with the choice shown.

It's a lot of work and easy to screw up, so beware. This tutorial deals struggles through some of that. Here is a Pen with some of the testing from this article in it.

Dropdown Default Styling is a post from CSS-Tricks

via CSS-Tricks http://css-tricks.com/dropdown-default-styling/