Why is the html select background-color black in Chrome when set to transparent?

Question

I have the following drop down menu and the background looks black in Chrome but white on Firefox/IE/Safari across Windows/Linux/Mac. I'm using the latest versions of all those browsers.

<style>
select {
    background-color: transparent;
    background-image: url(http://sstatic.net/so/img/logo.png);
}
</style>
<select>
    <option>Serverfault</option>
    <option>Stackoverflow</option>
    <option>Superuser</option>
</select>

Does anyone know how I can style the above so that Chrome shows the background as white when the color is set to transparent like in the other browsers?

EDIT: My goal is to display an image in the background of select. The image shows up properly in every browser except Chrome.

Answer 1

According to this and this, it is a bug in Chrome that is supposed to be fixed.

The bug appears in version 2.0. I just tested it in 3.0-beta, and it's fixed.

Answer 2

Why are you using background-color: transparent; for "select"? If you remove that chrome works.

What is the effect you are after? Maybe some demo?

Answer 3

This answer https://stackoverflow.com/a/5806434/964227 that I found in another question just like this worked perfectly for me.

Apparently Chrome doesn't accept an image as a select background. So, in order for the color to work, you have to remove the image and then set the color. I'll just copy and paste the other answer here.

select {
    background-image: none; /* remove the value that chrome dose not use */
    background-color: #333; /* set the value it does */
    border-radius: 4px;     /* make it look kinda like the background image */
    border: 1px solid #888;
}