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允许在background-image元素上进行option设置。

Answer 2

它不可能在css中做，因为它的本机元素在不同的操作系统中表现不同。但是网上有很多插件。参考我使用https://jqueryui.com/selectmenu/

的一个

Html <option>背景色线性渐变

2 个答案: