如何将Safari中输入框的蓝色聚焦轮廓替换为黑色？

你设置的outline样式没生效，大概率是因为测试环境（或移动端浏览器）自带了优先级更高的默认样式——比如用box-shadow代替outline实现高亮，或者outline: auto的写法被浏览器默认行为覆盖了。可以试试以下几种方案：

方案1：清除默认box-shadow+明确outline属性 #

把CSS改成这样，同时覆盖box-shadow和明确outline的具体属性：

input:active,
input:focus {
  /* 清除浏览器可能用的box-shadow高亮 */
  box-shadow: none !important;
  /* 替换auto为solid，明确轮廓样式 */
  outline: 1px solid rgb(16, 16, 16) !important;
  outline-offset: 0px !important;
  /* 针对webkit内核添加前缀，确保覆盖 */
  -webkit-outline: 1px solid rgb(16, 16, 16) !important;
}

方案2：重置表单控件默认样式 #

如果方案1还是不行，尝试重置input的默认外观，避免浏览器自带的特殊渲染：

input {
  /* 重置webkit和标准的外观样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 保留基础边框，根据需求调整 */
  border: 1px solid #ccc;
}

input:active,
input:focus {
  box-shadow: none !important;
  outline: 1px solid rgb(16, 16, 16) !important;
  outline-offset: 0px !important;
}

为什么原来的写法不生效？ #

• 部分移动端浏览器/模拟工具会用box-shadow而非outline来渲染输入框的聚焦状态，只设置outline无法覆盖这个样式。
• outline: auto是浏览器自动选择轮廓样式，可能会被默认的蓝色高亮优先级覆盖，换成明确的solid样式更稳定。

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