如何实现带有颜色选项列表的HTML下拉选择框？

问题原因 #

你当前代码不生效的核心原因是大多数浏览器会忽略原生<option>标签上定义的内联样式，你给<option>添加的color属性不会被渲染，所以所有色块都显示为默认黑色。该效果不需要安装额外插件就可以实现，你可以通过自定义模拟下拉框的方式实现预期效果。

实现代码 #

你可以隐藏原生的select组件，用HTML、CSS、JS手写模拟下拉交互，不依赖任何第三方插件，代码如下：

<!-- 模拟下拉框容器 -->
<div class="custom-select">
  <!-- 选中值展示区域 -->
  <div class="select-selected">Choose</div>
  <!-- 下拉选项列表 -->
  <div class="select-options hide">
    <div class="select-option" data-value="#0071c5">
      <span class="color-block" style="background:#0071c5"></span> Dark blue
    </div>
    <div class="select-option" data-value="#40E0D0">
      <span class="color-block" style="background:#40E0D0"></span> Turquoise
    </div>
    <div class="select-option" data-value="#008000">
      <span class="color-block" style="background:#008000"></span> Green
    </div>
    <div class="select-option" data-value="#FFD700">
      <span class="color-block" style="background:#FFD700"></span> Yellow
    </div>
    <div class="select-option" data-value="#FF8C00">
      <span class="color-block" style="background:#FF8C00"></span> Orange
    </div>
    <div class="select-option" data-value="#FF0000">
      <span class="color-block" style="background:#FF0000"></span> Red
    </div>
    <div class="select-option" data-value="#000">
      <span class="color-block" style="background:#000"></span> Black
    </div>
  </div>
  <!-- 隐藏原生select用于表单提交 -->
  <select name="color" class="form-control hide" id="color">
    <option value="">Choose</option>
    <option value="#0071c5">Dark blue</option>
    <option value="#40E0D0">Turquoise</option>
    <option value="#008000">Green</option>
    <option value="#FFD700">Yellow</option>
    <option value="#FF8C00">Orange</option>
    <option value="#FF0000">Red</option>
    <option value="#000">Black</option>
  </select>
</div>

.hide {
  display: none;
}
.custom-select {
  position: relative;
  width: 200px;
  font-family: Arial, sans-serif;
}
.select-selected {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  z-index: 99;
}
.select-option {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.select-option:hover {
  background-color: #f1f1f1;
}
.color-block {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

const selectedEl = document.querySelector('.select-selected');
const optionsEl = document.querySelector('.select-options');
const optionEls = document.querySelectorAll('.select-option');
const nativeSelect = document.getElementById('color');

// 点击展开/收起下拉
selectedEl.addEventListener('click', () => {
  optionsEl.classList.toggle('hide');
});

// 点击选项赋值
optionEls.forEach(option => {
  option.addEventListener('click', () => {
    const value = option.dataset.value;
    const text = option.textContent.trim();
    selectedEl.innerHTML = `<span class="color-block" style="background:${value}"></span> ${text}`;
    nativeSelect.value = value;
    optionsEl.classList.add('hide');
  });
});

// 点击页面其他区域收起下拉
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-select')) {
    optionsEl.classList.add('hide');
  }
});

以上代码保留了原生select用于表单提交，不影响原有业务逻辑，直接引入页面即可生效。如果不想自行编写交互逻辑，也可以使用成熟UI组件库的下拉选择组件，支持自定义选项内容，同样可以实现对应效果。

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