Select组件样式定制需求：固定文本颜色，仅点击时变更背景

看起来你已经折腾好久了，原生select的默认样式确实有点顽固，尤其是不同状态下的文本颜色变化，咱们一步步来搞定：

1. 强制所有状态下文本保持红色 #

首先要覆盖浏览器默认的各种交互状态样式，确保不管组件是聚焦、激活还是默认状态，文本颜色都牢牢锁定为红色。这里要注意选择器的优先级，避免被其他样式覆盖：

/* 基础样式：红色文本 + 黑色背景 */
.some-class {
  color: red;
  background-color: black;
  /* 移除浏览器默认的select外观，避免样式冲突 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 可选：添加基础布局样式，比如内边距、边框 */
  padding: 8px 16px;
  border: 1px solid #ddd;
}

/* 覆盖聚焦状态：保持文本红色，可自定义聚焦轮廓 */
.some-class:focus {
  color: red;
  outline: 2px solid #666; /* 替换成你想要的聚焦提示样式 */
}

/* 覆盖激活（点击按住）状态：文本红色不变，临时修改背景 */
.some-class:active {
  color: red;
  background-color: #333; /* 点击时的背景高亮色，松开后自动恢复黑色 */
}

/* 处理下拉选项的文本颜色（原生option样式支持有限，尽量简化） */
.some-class option {
  color: red;
  background-color: black;
}

2. 点击后背景自动恢复的两种方案 #

方案一：仅点击按住时高亮（纯CSS） #

上面的:active伪类已经实现了这个效果——按住select时背景变色，松开后立刻回到黑色，完全不需要JS，适合简单的点击反馈。

方案二：点击后高亮持续一段时间再恢复（JS+CSS） #

如果需要点击后哪怕松开鼠标，背景也保持高亮几秒再恢复，就需要配合JS添加临时类：

// 获取select元素
const mySelect = document.querySelector('.some-class');

mySelect.addEventListener('click', function() {
  // 添加临时高亮类
  this.classList.add('temp-highlight');
  // 1秒后移除类（时间可自行调整）
  setTimeout(() => {
    this.classList.remove('temp-highlight');
  }, 1000);
});

对应的CSS补充：

.temp-highlight {
  background-color: #333; /* 和:active的高亮色保持一致也可以 */
}

注意事项 #

• 如果你的样式还是不生效，检查一下是否有其他CSS规则的优先级更高（比如带!important的样式），可以通过浏览器开发者工具查看样式覆盖情况。
• 原生select的下拉选项样式在不同浏览器里支持度不一，如果需要完全统一的样式，可能需要用div模拟自定义select组件，但原生方案已经能满足你的核心需求了。

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