如何使用CSS修复iOS 15中HTML select标签默认显示蓝色的问题

核心修复思路为清除Safari默认的原生控件样式，主动自定义所有视觉属性，避免系统默认样式覆盖自定义规则。

完整修复CSS代码 #

select {
  /* 移除iOS系统原生默认控件外观 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 覆盖系统默认蓝色 tint 色调 */
  accent-color: #333;
  /* 清除点击时的蓝色高亮遮罩 */
  -webkit-tap-highlight-color: transparent;
  /* 自定义基础样式，替换系统默认蓝色样式 */
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  color: #333333;
  /* 自定义下拉箭头，抵消appearance属性带来的箭头消失问题 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23999' d='M6 8L1 3h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* 自定义选中选项的样式，覆盖默认蓝色选中态 */
select option:checked {
  background-color: #f5f5f5;
  color: #333333;
}

额外注意事项 #

• 上述代码兼容iOS 15及以上所有版本，也可向下兼容更早的iOS系统
• 所有自定义属性可以根据业务设计需求调整数值，只要保留重置默认样式的核心属性即可
• 如果不需要自定义下拉箭头，只需要覆盖默认蓝色，可以仅保留-webkit-appearance: none、accent-color和-webkit-tap-highlight-color三个属性，搭配自己的基础样式即可

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