How to style select drop down?

I am on a mac running firefox. I have a website and the select dropdown box has a funny style:

When I look at other websites in the same browse开发者_如何学Pythonr they look different:

Or even at my code here: jsFiddle

What could possibly be causing my website to display how it is because as I understand it you have very little control over how select boxes are displayed?

Thanks

Are you using CSS to format <select>? Or a CSS reset? If you use some rules like border or background, the default style disappears and you get this grey box.. You should remove those CSS settings.

The default dropdowns styling vary across browsers. Unfortunately there's no real CSS way to restyle them.

That said, you could use a jQuery plugin such as this: Custom Select Box which I've used in the past to good effect.

The second example is displayed using system presentation of select. The first one does not look like a system select because likely some custom styling applied which does not more than just resets the system presentation.

It is generally not possible to style HTML input fields other than text fields effectively. To do that developers usually re-implement input controls using complex HTML, this is suggested by Ian Devlin.