如何将渐变背景添加到下拉选择选项？答案

【问题标题】：How to add gradient background to a drop-down select option?如何将渐变背景添加到下拉选择选项？
【发布时间】：2018-06-26 09:13:09
【问题描述】：

我想知道是否可以为选择选项添加样式，该选项显示为下拉菜单，特别是在::before 部分。如果我将选择用作列表（使用size="5"）效果很好。所以，我认为下拉 ::before 元素不起作用：

#list {
  width: 200px;
  height: 100px;
}

#dropdown {
  width: 200px;
}

.gradient {
  position: relative;
  overflow: hidden;                   
}

.gradient:before {
  content: "";
  position: absolute;
  width: 900px;
  height: 300px;
  top: -50%;
  left: -125%;
  background-image: linear-gradient(#5cb85c, transparent);
  transform: rotate(90deg);
}

<html>
  <body>
    <select id="dropdown">
      <option value="one" class="gradient">One</option>    
      <option value="two">Two</option>    
      <option value="three" class="gradient">Three</option>    
      <option value="four">Four</option>    
    </select>
    
    <br/><br/>
    
    <select id="list" size="5">
      <option value="one" class="gradient">One</option>    
      <option value="two">Two</option>    
      <option value="three" class="gradient">Three</option>    
      <option value="four">Four</option>    
    </select>    
  </body>
</html>

有可能吗？如果不是，我将使用平面背景颜色

【问题讨论】：

如果不被欺骗，相关 - stackoverflow.com/questions/5887133/…

标签： html css drop-down-menu background

【解决方案1】：

这只有在您从零开始创建自己的下拉菜单时才有可能。纯色很容易实现，见https://gist.github.com/paulgriffin1989/8984254

【讨论】：

嗯，您的示例适用于平面颜色，对吗？我没有看到任何渐变