如何修改HTML select下拉箭头颜色并保持原有箭头样式？

不需要移除原生控件外观、也不需要替换自定义箭头素材，仅通过原生CSS属性即可修改箭头颜色，完全保留系统默认的箭头形状与交互逻辑。

核心实现逻辑 #

• 原生select的下拉箭头默认继承元素本身的color属性值，直接给select设置目标颜色即可修改箭头颜色
• 下拉选项的文字会默认继承select的color值，需要单独给option标签设置你需要的正文文字颜色
• 可补充accent-color属性做旧版本浏览器兼容，统一表单控件的强调色表现

完整代码示例 #

CSS部分 #

#cars{
  width: 150px;
  /* 设置箭头为目标颜色，此处示例为红色，可替换为任意合法色值 */
  color: #f00;
  /* 兼容旧版浏览器 */
  accent-color: #f00;
}
/* 单独设置下拉选项的文字颜色，避免和箭头颜色混淆 */
#cars option {
  color: #333;
}

HTML部分 #

<!DOCTYPE html>
<html>
<body>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</body>
</html>

兼容性说明：该方案适配Chrome 111+、Firefox 116+、Safari 16.4+及以上版本的所有现代浏览器。如果需要兼容更早的浏览器版本，只能通过appearance: none隐藏原生箭头后自定义添加箭头素材，这种方式无法100%还原系统原生箭头样式，不符合需求，因此不做推荐。

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