Why is the html select background-color black in C

2020-04-27 00:18发布

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.

3条回答
ら.Afraid
2楼-- · 2020-04-27 00:27

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?

查看更多
在下西门庆
3楼-- · 2020-04-27 00:29

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.

查看更多
▲ chillily
4楼-- · 2020-04-27 00:50

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;
}
查看更多
登录 后发表回答