CSS only custom-styled select

Todd Parker - Filament Group Inc.

How this works: This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select's text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.). We then add the custom arrow via a pseudo element to the right.

Opera, Firefox and older IE don't allow you to consistently style away the select arrow so we're setting the select width to 110% and clipping it with overflow:hidden on the parent. We then add extra right padding on the native select so the text won't run over the custom arrow or be clipped by the wrapper.

Confirmed to work in the following browsers

This technique seems to be functional everywhere since we're still leaving the select in place. Worst case, the native selct styling and hte custom arrow will both show up, or the text won't be perfectly aligned but in all populat platforms, this looks very consistent. One minr caveat: setting the select to 110% means the meanu may open up a bit wider than expected. We set a style to set it to 100% on focus, but thsi doesn't seem to take effect everywhere.