HTML select / option下拉列表 - 背景图片不会出现在Chrome / Edge中

时间:2015-12-07 03:14:36

标签: html css google-chrome select html-select

我希望图像图标在select / option元素上显示为背景图像。它在Firefox上完美运行,但在Chrome中,图像根本不显示?

以下是我使用的示例代码。

<select style="-webkit-appearance: none;">
  <option value="1" style="background:url('http://downloadicons.net/sites/default/files/anticlockwise-small-arrow-icons-57546.png') no-repeat right center">OPTION ONE</option>
  <option value="2" style="background:url('http://www.w3f.com/gifs/bullits/star3.gif') no-repeat right center">OPTION TWO</option>
</select>

我在这里创建了这个JS:https://jsfiddle.net/03vaaL5o/

如果图标在Chrome以及所有其他现代浏览器(Opera,Edge)中正确显示,我该怎么办?

1 个答案:

答案 0 :(得分:1)

根据您链接的其他文章,这不是整个浏览器的一致性。样式选择框不受官方支持。你应该使用这样的东西:

https://jqueryui.com/selectmenu/#custom_render