Select box arrow style

Browsers and OS’s determine the style of the select boxes in most cases, and it’s next to impossible to alter them with CSS alone. You’ll have to look into replacement methods. The main trick is to apply appearance: none which lets you override some of the styling.

My favourite method is this one:

It doesn’t replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).

Good luck 🙂

Leave a Comment