Chrome默认select元素hover背景修改及自定义颜色设置方法

嘿，这个问题我之前折腾过好一会儿，Chrome对原生<select>的样式限制确实有点烦人，不过用WebKit专属的伪元素就能完美解决你的需求！

核心思路 #

Chrome的原生下拉选项hover样式是由浏览器默认的::-webkit-menu-item伪元素控制的，而<select>控件本身的hover状态则可以直接用标准的:hover选择器修改。我们只需要针对这两个部分写CSS覆盖默认样式就行。

修改后的完整CSS代码 #

/* 你的原有样式 */
.drp-policydetails { 
  border: 1px solid #dddddd; 
  background-color: #ffffff; 
}

/* 修改select控件本身的hover背景 */
.drp-policydetails:hover {
  background-color: #f0f8ff; /* 替换成你想要的颜色，这里是淡蓝色示例 */
  border-color: #cccccc; /* 可选：调整hover时的边框颜色 */
}

/* 移除默认下拉选项hover背景，替换为自定义颜色 */
.drp-policydetails::-webkit-menu-item:hover {
  background-color: #e6f7ff; /* 自定义的选项hover颜色 */
  /* 如果想完全移除背景色，就改成下面这行 */
  /* background-color: transparent; */
}

注意事项 #

• 优先级问题：如果你的form-control类（比如Bootstrap的）有默认的hover样式，确保你的.drp-policydetails:hover样式在Bootstrap CSS之后加载，或者用更具体的选择器比如select.form-control.drp-policydetails:hover来提高优先级。万不得已时可以加!important，但尽量优先调整选择器优先级。
• 兼容性：::-webkit-menu-item是WebKit内核专属的伪元素，所以只在Chrome、Safari这类浏览器生效。如果需要兼容Firefox，得用自定义下拉组件替代原生select，但你问的是Chrome，这个方案完全够用。
• 测试验证：写完样式后记得强制刷新Chrome（Ctrl+F5）测试，避免浏览器缓存导致样式不生效。

你的HTML代码不需要任何修改，保持原有结构即可：

<div className="form-group">
  <select className="form-control drp-policydetails">
    <option hidden>-- Select One --</option>
    <option>123456789</option>
    <option>789232323</option>
  </select>
</div>

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