html <option> 背景色线性渐变

Question

是否有任何选项可以制作每个 <option> 的背景？来自 <select> 的标签标签包含不同的渐变颜色？

据我所知，有一个 CSS 选项:linear-gradient(direction,color1,color2)允许设置渐变，但此选项不能应用于 background-color每个选项的属性。

如果有解决方案，我希望它能与许多浏览器兼容，因此它可以在 chrome、mozilla、Explorer 等中使用...

Answer 1

它不适用于background-color。它是 background-image。

所以类似这样的东西应该适用于支持它的浏览器(结合 :nth-child 以针对您想要的特定选项)。

option:nth-child(1) {background: linear-gradient(to right, red, green);}
option:nth-child(2) {background: linear-gradient(to right, green, blue);}
option:nth-child(3) {background: linear-gradient(to right, blue, yellow);}
option:nth-child(4) {background: linear-gradient(to right, yellow, red);}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>

---

我认为，只有 Firefox 允许在 option 元素上设置 background-image。