HTML 选择/选项下拉菜单 - 背景图像不会出现在 Chrome/Edge 中

Question

我希望图像图标在选择/选项元素上显示为背景图像。它在 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)中正确显示？

Answer 1

根据您链接的另一篇文章，这在整个浏览器中并不一致。官方不支持样式化选择框。你应该使用这样的东西:

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