如何在下拉列表添加SVG图标？CSS设置后资源加载但图标不显示

现有代码 #

CSS #

/* 第一个选择器存在语法错误，漏写类选择器前缀. */
appt-status option[value="0"] {
    background-image: url(../icons/not_confirmed-icon.svg);
}

.appt-status option[value="1"] {
    background-image: url(../icons/confirmed-icon.svg);
}

.appt-status option[value="2"] {
    background-image: url(../icons/reschedule-icon.svg);
}

.appt-status option[value="3"] {
    background-image: url(../icons/pending-icon.svg);
}

HTML #

<select class="form-control appt-status" data-bind="value: selectedAppointmentStatus">
    <option class="status-list" value="1" style="color: #3EA47B">Confirmed</option>
    <option class="status-list" value="2" style="color: #FF0000">Reschedule</option>
    <option class="status-list" value="3" style="color: #FFA927">Pending</option>
    <option class="status-list" value="0" style="color: #3EA47B">Not opted-in</option>
</select>

问题现象 #

浏览器开发者工具中显示SVG图标资源已正常加载，但下拉列表中完全不显示图标。

效果对比 #

• 目标设计效果：
  
• 实际运行效果：
  

故障原因 #

1. 原生<select>控件由浏览器/操作系统底层渲染，对<option>子元素的样式支持存在大量限制，不支持background-image属性，即使样式规则匹配成功、资源加载完成，渲染层也不会绘制背景图，这是浏览器本身的特性限制，和资源路径、写法无关。
2. 首条CSS选择器存在语法错误，类选择器前漏写.，即使浏览器支持option背景图，value为0的选项样式也无法生效。

实现方案 #

原生select无法实现带图标的下拉选项，只能通过自定义模拟下拉的方式实现，以下是两种常用落地方案：

方案1：轻量自定义下拉（无依赖） #

隐藏原生select，用div+ul/li模拟下拉结构，完全自定义样式，可1:1还原设计稿，核心代码如下：

<!-- 自定义下拉容器 -->
<div class="custom-select">
  <!-- 选中态展示区 -->
  <div class="select-selected">
    <span class="status-icon confirmed"></span>
    <span>Confirmed</span>
  </div>
  <!-- 下拉选项列表 -->
  <ul class="select-options">
    <li data-value="1">
      <span class="status-icon confirmed"></span>
      <span>Confirmed</span>
    </li>
    <li data-value="2">
      <span class="status-icon reschedule"></span>
      <span>Reschedule</span>
    </li>
    <li data-value="3">
      <span class="status-icon pending"></span>
      <span>Pending</span>
    </li>
    <li data-value="0">
      <span class="status-icon not-confirmed"></span>
      <span>Not opted-in</span>
    </li>
  </ul>
</div>

对应样式代码：

.custom-select {
  position: relative;
  width: 200px;
}
.select-selected {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  z-index: 99;
}
.select-options.show {
  display: block;
}
.select-options li {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.select-options li:hover {
  background: #f5f5f5;
}
/* 状态图标样式 */
.status-icon {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.status-icon.confirmed {
  background-image: url(../icons/confirmed-icon.svg);
}
.status-icon.reschedule {
  background-image: url(../icons/reschedule-icon.svg);
}
.status-icon.pending {
  background-image: url(../icons/pending-icon.svg);
}
.status-icon.not-confirmed {
  background-image: url(../icons/not_confirmed-icon.svg);
}

交互逻辑代码：

// 切换下拉展开/收起
document.querySelector('.select-selected').addEventListener('click', (e) => {
  e.stopPropagation()
  document.querySelector('.select-options').classList.toggle('show')
})
// 点击选项同步值
document.querySelectorAll('.select-options li').forEach(li => {
  li.addEventListener('click', () => {
    // 同步原生select的值，适配原有knockout绑定逻辑
    document.querySelector('.appt-status').value = li.dataset.value
    // 更新选中区展示内容
    document.querySelector('.select-selected').innerHTML = li.innerHTML
    // 收起下拉
    document.querySelector('.select-options').classList.remove('show')
  })
})
// 点击页面其他区域收起下拉
document.addEventListener('click', () => {
  document.querySelector('.select-options').classList.remove('show')
})

方案2：使用现有UI组件库 #

如果项目已经引入Bootstrap、Element UI、Ant Design等前端UI库，直接使用库提供的Select组件即可，这类组件均支持自定义选项内容，可直接在选项中插入图标，无需自行编写交互逻辑，兼容性更稳定。

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