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

Posted 2023-03-06

【中文标题】下拉图像在 Chrome 和 IE 中不可见

【英文标题】：Dropdown image not visible in Chrome and IE

【发布时间】：2016-02-07 08:17:00

【问题描述】：

我在我的网站中创建了一个下拉菜单，并在其中添加了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>

【问题讨论】：

此处在 Firefox 中不可见

使用 firefox，您可以使用某些属性对选项进行样式化，但在其他浏览器中则不能。

适用于 Firefox - 但我无法选择任何选项。更好的跨浏览器解决方案是使用图像创建您自己的下拉列表。如果你用谷歌搜索，你会找到很多解决方案。

在浏览器中选择选项的样式非常不一致，我建议使用 jQuery 替代方案，例如jQuery Selectmenu

【参考方案1】：

抱歉，您遇到了问题。您使用的代码仅适用于 Firefox 和 Webkit 浏览器。您要么必须使用JQuery UI 来满足您的需要，要么您也可以在this 链接中使用一些代码

【参考方案2】：

您无法在 webkit (Google) 浏览器中执行此操作。您将需要使用 ul 和 li 元素的替代解决方案。

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