Custom select using CSS Example

Example:

July 2014

Oct 2015 - After further testing, if you need white text (e.g. the 'dark' example below) the cross-browser support isn't great. I'd advise against using this example with white text solutions. Perhaps seek out a javascript option.

Custom Select (dropdown) Using CSS

Create a custom looking select box using CSS only. The dropdown part (options) of the select remains the same as native dropdown style (recommended). Please read comments in the css. Based off https://jsbin.com/yaruh/49/edit.

How it works

Removes all styles from select tag
Hides select dropdown arrow (except IE8 & IE9)
Style div.custom-select which wraps the select
Uses psuedo element to add CSS arrow
Add padding to select to ensure text doesn't run under arrow

Browser support:

Chrome
Firefox
Safari
IE8+
(uses native dropdown decoration for IE8 & IE9)

Result

Our Custom select:

You would need some Javascript to enable/disable the custom select tag AND the select
A different example (dark):

Native select for comparison: