Styling HTML select element

Question

I have tried everything to remove the default down arrow button from the the SELECT element, but couldn't succeed yet.

I have also tested the background image, that shows behind the default button. And even tried by making NONE as Background, but it's not working for me.

How can I style a select element so the arrow does not appear?

Answer 1

It's impossible to do in all browsers (reliably) without a JavaScript workaround. Not to mention, if you're not careful it will provide a bad UX. The one I prefer for tasteful styling of the select element is:

http://uniformjs.com/

You just need to edit the sprite to look like you want and it'll take care of the rest.