Background Image for Select (Dropdown) Does Not Work in Chrome

Dropdown image not visible in Chrome and IE

You can't do it in webkit (Google) browsers. You will need an alternative solution with ul and li elements.

http://getbootstrap.com/components/#dropdowns

CSS Background image is only working in Chrome and no other browser

Look at your css file. You're path is CSS/styles.css which is a relative file path.

For your images, you're using /Images/image.jpg which is an absolute file path.

If you use /Images on a hosting account online, it will go to whatever your root directory is which is what you intend. If you use /Images on your local device... it will go as far back to get to the root as you can go.

So if my computer structure is:

my-computer
-desktop
--my-project
---index.html
---Images
----image.jpg
---CSS
----styles.css

/Images is going all the way back to the my-computer folder and looking for it there. It wont find it there though.

What you want to do is ../Images to move back one level outside of the css folder and look for the images folder.

CSS for Dropdown does not works fine in Chrome and IE

I think your problem in Google Chrome has to do with a bug in version 2.0, but it's solved in 3.0. Here you have a topic about this with link to the bugs:

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

About IE, are you using IE 7 or lower? If so, transparent background is not supported in them. You should apply the same background color than the parent specifically to IE7 and lower (for example with a hack).

---

Related Topics