下拉图片在Chrome和IE中不可见 [英] Dropdown image not visible in Chrome and IE

问题描述

我已在我的网站上建立下拉式选单，并在其中加入背景图片。我可以在Firefox中看到它，但无法使用Chrome或IE查看它。

这里是：

I have made a dropdown in my site and added background image to it. I can see it fine in Firefox, but not able to see it using Chrome or IE.

Here is: my site

On the very top you can see a search icon. Upon hovering that you can see a pop out. Inside that I am using a dropdown.

You can see the images showing fine in Firefox but not using any other browser.

:

Here is the select dropdown code I used:

My JS

function goToNewPage(dropdownlist){
    var url = dropdownlist.options[dropdownlist.selectedIndex].value;
    if (url != ""){
        window.open(url);
    }
}

My HTML

<form name="dropdown">
    <label>I am Looking for</label>
    <img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
    <select accesskey="E" name="list">
        <option selected="">Please select one</option>
        <option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;" value="http://www.google.com/">Japanese Companies</option>
        <option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;" value="http://www.google.com/">Service Provider (Non-Japanese)</option>
    </select>
    <input type="button" onclick="goToNewPage(document.dropdown.list)" value="Go">
</form>

解决方案

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

这篇关于下拉图片在Chrome和IE中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！