html - 背景图像不适用于 Firefox 48 以上版本和其他浏览器中的选择选项

Question

我想要像这样的输出：

Firefox 版本 48 及其以下版本的输出：

Firefox 更高版本（48 以上）和其他浏览器：

代码 ：

<select style="padding-left: 25px; background: no-repeat url(yellow.png) 4px 1px">
  <option style="padding-left: 25px; background-image: url(blue.png);" value="116">Blue</option>
  <option style="padding-left: 25px; background: url('red.jpg') 4px 1px;" value="118">Red</option>
  <option style="padding-left: 25px; background: url('green.jpg') 4px 1px;" value="119">Green</option>
  <option style="padding-left: 25px; background: url(yellow.png) 4px 1px; background-attachment: scroll;" value="120" selected="selected">Yellow</option>
  <option style="padding-left: 25px; background: url(orange.jpg) 4px 1px" value="121">Orange</option>
</select>

希望在 Firefox 更高版本和其他浏览器中显示第一个输出。

• 我不能在这个项目中使用 JQuery 或引导程序。
• 也不能使用表单元素以外的元素。

有谁知道，如何使它工作？

谢谢。

Answer 1

您应该使用url('./yellow.png')orurl('../yellow.png')代替url(yellow.png)，具体取决于您的图像所在的位置。