如何为<select>标签中每个<option>单独设置图标颜色？

原生<select>和<option>的样式受浏览器渲染机制限制，内部嵌套的HTML标签不会被解析，所以无法单独为图标设置颜色，只能给整个<option>统一设置颜色。要实现图标和文本颜色分离的效果，需要用自定义下拉组件替代原生<select>，以下是可行的实现方案：

实现代码 #

HTML #

<!DOCTYPE html>
<html>
<head>
    <style>
        .fa {
            font-family: 'FontAwesome', sans-serif;
        }
    </style>
</head>
<body>
    <!-- 自定义下拉容器 -->
    <div class="custom-select">
        <!-- 选中项展示 -->
        <div class="selected-item">
            <span class="fa" style="color: red;">&#xf13d;</span>
            <span>ANCHOR LABEL</span>
        </div>
        <!-- 选项列表 -->
        <div class="options-list">
            <div class="option" data-value="anchor">
                <span class="fa" style="color: red;">&#xf13d;</span>
                <span>ANCHOR LABEL</span>
            </div>
            <div class="option" data-value="flask">
                <span class="fa" style="color: green;">&#xf0c3;</span>
                <span>FLASK LABEL</span>
            </div>
        </div>
    </div>
</body>
</html>

CSS #

.custom-select {
  position: relative;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.selected-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  display: none;
}

.options-list.active {
  display: block;
}

.option {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.option:hover {
  background-color: #f0f0f0;
}

JavaScript #

const customSelect = document.querySelector('.custom-select');
const selectedItem = customSelect.querySelector('.selected-item');
const optionsList = customSelect.querySelector('.options-list');
const options = customSelect.querySelectorAll('.option');

// 展开/收起选项列表
selectedItem.addEventListener('click', () => {
  optionsList.classList.toggle('active');
});

// 选择选项并更新选中项
options.forEach(option => {
  option.addEventListener('click', () => {
    const icon = option.querySelector('.fa').cloneNode(true);
    const text = option.querySelector('span:last-child').textContent;
    selectedItem.innerHTML = '';
    selectedItem.appendChild(icon);
    selectedItem.appendChild(document.createElement('span')).textContent = text;
    optionsList.classList.remove('active');
    // 获取选中的值，可用于后续业务逻辑
    console.log('选中值:', option.dataset.value);
  });
});

// 点击外部区域收起选项列表
document.addEventListener('click', (e) => {
  if (!customSelect.contains(e.target)) {
    optionsList.classList.remove('active');
  }
});

方案说明 #

• 完全摆脱原生<select>的样式限制，通过<div>模拟下拉结构，自由控制图标和文本的颜色
• 保留原生下拉的核心交互逻辑：点击展开选项、选择选项后更新显示、点击外部关闭列表
• 无需依赖外部链接，直接使用Unicode字体图标实现需求

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