How to hide the border and background color of the drop-down arrow of a HTML <select> element?

Question

I found that in the center of Mozilla home page, there is a <select> element (drop-down list) whose arrow has no border and background color. While on facebook sign-up page, the drop-down arrow has the windows standard border and background color. I am wondering what makes this difference? I tried to set border to none in CSS, but it only hides the border around the whole <select> element, the arrow still has border. I am using Firefox 4 on Windows.

See attached screenshot. The upper half shows the drop-down list on Facebook, while the lower half shows the drop-down list on Mozilla.

Answer 1

When the border css property of the select element isn't overridden, then it's rendered as native as possible (the mozilla's case). When, on the other hand, the border property is specified, browser tries to render select with a border and sacrifices some native look of it (facebook's case).

Or, maybe, it tries to render the native combobox without border and then draws border around it. Anyhow, when the border is specified, combobox needs to be drawn in different ways windows-wise or browser-wise.

And FYI, I've got the classic theme in win7 and mozilla's select button looks like any other classic windows button: gray and 3D:

Answer 2

What you see there is not a select, but an input field with another input field of type image right next to it. The image input acts as a submit button for a form. Their html for it is as follows:

<input id="q" type="search" placeholder="Search" name="q">
<input id="quick-search-btn" type="image" alt="Search" src="/images/template/search-submit.png">

By the way, if you are running firefox, I would recommend getting the firebug add-on. Then you can right click on any element and inspect it.