能否为select选择框添加::before伪元素实现前置SVG图标？

直接给<select>标签加::before伪元素实现前置图标行不通。
原因是<select>属于浏览器原生接管渲染的替换元素，这类元素的伪元素默认不会被渲染，无法生效。

可行实现方案 #

给select套一层相对定位的父容器，把图标绑定在父容器的伪元素上，绝对定位到选择框左侧即可，效果和参考图完全一致：

代码实现 #

1. 调整HTML结构，给select加外层包裹层：

<div class="select-wrap">
  <select class="rankings_selection" name="" id="">
    <option value="">Last 7 days</option>
    <option value="">Last 3 days</option>
  </select>
</div>

2. 编写对应CSS：

/* 外层容器设为相对定位，作为图标定位基准 */
.select-wrap {
  position: relative;
  display: inline-block;
}

/* 前置图标伪元素 */
.select-wrap::before {
  content: "";
  position: absolute;
  /* 定位到选择框左侧垂直居中 */
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  /* 内联日历SVG，和参考效果匹配，可替换为你自己的图标地址 */
  background: 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="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>') center/contain no-repeat;
  /* 关键：让图标不拦截鼠标点击事件，保证select可正常点开 */
  pointer-events: none;
}

/* 调整select样式，留出图标位置 */
.rankings_selection {
  /* 左侧padding大于图标宽度+左右间距，避免文字覆盖图标 */
  padding: 8px 12px 8px 36px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  /* 清除浏览器默认select样式，避免样式错位 */
  appearance: none;
  min-width: 140px;
}

注意事项 #

• 如果需要自定义select右侧的下拉箭头，也可以用同样的方法，给父容器加::after伪元素实现即可
• 图标可以替换成你自己的SVG资源地址，只要保证大小和定位匹配就行
• 必须给图标伪元素设置pointer-events: none，否则会出现点击select无响应的问题

内容的提问来源于stack exchange，提问作者Vivek Nath R