Question

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

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

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

Answer 1

只有从零创建自己的下拉菜单时才可以这样做。平面颜色很容易实现，请参阅https://gist.github.com/paulgriffin1989/8984254

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

1 个答案: