下拉图片在Chrome和IE中不可见

Question

我在我的网站上下了一个下拉列表并添加了background image。我可以在Firefox中看到它，但无法使用Chrome或IE看到它。

这是： my site

在最顶部，您可以看到搜索图标。在盘旋时，您可以看到弹出窗口。在里面，我正在使用下拉列表。

您可以在Firefox中看到图片显示正常但不使用任何其他浏览器。

：

以下是我使用的选择下拉代码：

我的JS

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

我的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>

Answer 1

抱歉得到你的问题。您使用的代码仅适用于Firefox和Webkit浏览器。您必须使用JQuery UI来满足您的需求，或者您也可以使用this链接中的一些代码

Answer 2

您无法在webkit（Google）浏览器中执行此操作。您需要一个包含ul和li元素的替代解决方案。

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