如何为下拉式select选项添加渐变背景？::before伪元素失效求解

先给你明确结论：下拉状态下的原生<option>元素几乎无法通过::before伪元素添加样式，这是浏览器的原生控件渲染限制导致的。

为什么会出现这种差异？ #

当<select>没有设置size属性时，它触发的是浏览器的原生下拉菜单控件——这个控件并不是由普通HTML元素构成的，而是浏览器自身绘制的独立UI组件。绝大多数主流浏览器（Chrome、Firefox、Safari等）都会忽略针对下拉状态<option>的伪元素（包括::before/::after）样式，甚至部分复杂背景样式也会被过滤。

而当你设置size="5"时，<select>切换为列表框模式，此时内部的<option>是作为可正常渲染的HTML元素存在的，所以你的渐变伪元素样式能正常生效。

可行的解决方案 #

如果一定要实现带自定义样式（比如渐变背景）的下拉选项，有两个方向可以选择：

1. 使用自定义下拉组件（推荐）

放弃原生<select>，用HTML+CSS+JavaScript模拟一个下拉菜单，这样就能完全控制每个选项的样式，包括伪元素。示例代码如下：

<style>
.custom-select {
  position: relative;
  width: 200px;
}
.select-trigger {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  background-color: #fff;
}
.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
}
.options-list.active {
  display: block;
}
.gradient-option {
  position: relative;
  padding: 8px;
  overflow: hidden;
  cursor: pointer;
}
.gradient-option::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 300px;
  top: -50%;
  left: -125%;
  background-image: linear-gradient(#5cb85c, transparent);
  transform: rotate(90deg);
}
</style>

<div class="custom-select">
  <div class="select-trigger">选择选项</div>
  <ul class="options-list">
    <li class="gradient-option">One</li>
    <li>Two</li>
    <li class="gradient-option">Three</li>
    <li>Four</li>
  </ul>
</div>

<script>
const trigger = document.querySelector('.select-trigger');
const list = document.querySelector('.options-list');

trigger.addEventListener('click', () => {
  list.classList.toggle('active');
});

// 点击外部关闭下拉菜单
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-select')) {
    list.classList.remove('active');
  }
});
</script>

2. 退而求其次：使用纯色背景

如果不想引入自定义组件的复杂度，直接给<option>设置background-color是兼容性最好的方案，所有浏览器都支持：

.gradient {
  background-color: #5cb85c;
  color: #fff; /* 可选：搭配文字颜色提升可读性 */
}

你的原始代码（供参考） #

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

内容的提问来源于stack exchange，提问作者ChesuCR