如何用<select>与CSS实现下拉选项内删除线+红文本+普通文本样式？

这种方式能完全控制每个选项的文本样式，是最推荐的方案。示例代码如下：

HTML结构 #

<div class="custom-select">
  <div class="select-trigger">选择一个选项</div>
  <ul class="options-list">
    <li class="option-item">
      <span class="strike-text">strike through text</span>
      <span class="red-text">RED TEXT</span>
      <span> - Normal Text</span>
    </li>
    <li class="option-item disabled">Some Text 2</li>
    <li class="option-item">
      <span class="strike-text">Some Text 3</span>
    </li>
  </ul>
</div>

CSS样式 #

/* 自定义下拉容器 */
.custom-select {
  position: relative;
  width: 240px;
  font-size: 14px;
}

/* 下拉触发按钮 */
.select-trigger {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
}

/* 选项列表 */
.options-list {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  z-index: 10;
}

/* 展开列表的状态 */
.custom-select.active .options-list {
  display: block;
}

/* 单个选项 */
.option-item {
  padding: 8px 12px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #f5f5f5;
}

/* 禁用状态的选项 */
.option-item.disabled {
  color: #999;
  cursor: not-allowed;
}

/* 删除线文本样式 */
.strike-text {
  text-decoration: line-through;
  color: #666;
}

/* 红色文本样式 */
.red-text {
  color: red;
  margin: 0 4px;
}

交互逻辑（JavaScript） #

const customSelect = document.querySelector('.custom-select');
const selectTrigger = customSelect.querySelector('.select-trigger');
const optionsList = customSelect.querySelector('.options-list');

// 点击触发按钮展开/收起列表
selectTrigger.addEventListener('click', () => {
  customSelect.classList.toggle('active');
});

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

// 点击选项后更新触发按钮文本并收起列表
optionsList.querySelectorAll('.option-item:not(.disabled)').forEach(item => {
  item.addEventListener('click', () => {
    selectTrigger.textContent = item.textContent;
    customSelect.classList.remove('active');
  });
});

二、原生的妥协方案（局限性大） # 如果一定要用原生<select>，只能用Unicode删除线字符（如S̶o̶m̶e̶ ̶T̶e̶x̶t̶这种）来模拟删除线，但没法给部分文本单独设置颜色，整个<option>只能用同一种颜色。这种方式只能满足简单的删除线需求，颜色区分的需求无法实现。 内容的提问来源于stack exchange，提问作者TSCAmerica.com