使用select::before为下拉框自定义显示Chevron图标问题

<select> 属于替换元素（Replaced Element），浏览器对这类元素的渲染规则是：元素外观由外部资源或浏览器原生控件决定，不会为其生成 ::before/::after 伪元素。这就是为什么你给 select::before 写的样式完全不生效，而普通元素（比如 button）可以正常使用伪元素的核心原因。

最可靠的方式是给 <select> 套一个父容器，把伪元素加在容器上，同时隐藏原生下拉箭头，这样就能单独对伪元素应用 invert 滤镜适配深色主题。

代码实现 #

HTML

<div class="select-container">
  <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
</div>

CSS

/* 包裹容器：提供相对定位基准 */
.select-container {
  position: relative;
  display: inline-block;
}

/* 隐藏原生下拉箭头，统一样式 */
.select-container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
}

/* 自定义下拉箭头（伪元素） */
.select-container::before {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  /* 用内联SVG作为背景，默认深色箭头 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none; /* 避免干扰select的点击交互 */
}

/* 深色主题：对伪元素单独应用反转滤镜 */
@media (prefers-color-scheme: dark) {
  .select-container::before {
    filter: invert(1);
  }
  /* 同步调整select的深色样式 */
  .select-container select {
    background-color: #2d2d2d;
    color: #fff;
    border-color: #444;
  }
}

关键细节说明 #

• pointer-events: none：必须给伪元素加上这个属性，否则点击箭头区域会无法触发下拉框展开。
• 跨浏览器兼容：appearance 属性需要加webkit和moz前缀，确保在Chrome/Firefox等主流浏览器生效。
• 内联SVG：直接用data URI嵌入SVG，避免额外请求，同时方便控制默认颜色。

如果不想用包裹容器，也可以通过CSS变量控制SVG的颜色，避免维护两张SVG：

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  /* 用CSS变量指定SVG颜色 */
  --arrow-color: #333;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23%7B%7Barrow-color%7D%7D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

@media (prefers-color-scheme: dark) {
  select {
    background-color: #2d2d2d;
    color: #fff;
    border-color: #444;
    --arrow-color: #fff;
  }
}

不过这种方法需要浏览器支持CSS变量（现在主流浏览器都已支持），但如果你坚持要用滤镜，包裹容器的方案更直接可控。

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