Safari浏览器输入框白色背景无法移除、CSS样式不生效问题求助

针对你遇到的两个问题，对应解决方法如下：

输入框白色背景残留问题 #

Safari 存在两套私有默认样式会强制覆盖你写的透明背景配置，需要额外补充规则：

• 先在你现有的 .contact-form .form-control 相关样式中加入 -webkit-tap-highlight-color: transparent !important;，清除 Safari 点击元素时默认生成的半透明背景遮罩
• 新增针对 Safari 自动填充样式的覆盖规则，避免自动填充触发强制白色背景：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
}

上面的规则用内阴影覆盖自动填充的白色背景，同时用超长过渡延迟自动填充背景色的生效时间，实现永久透明的效果。

点击输入框出现蓝色外轮廓问题 #

你已经配置的 outline: none 只覆盖了标准属性，残留的蓝色轮廓是 Safari 私有属性 -webkit-focus-ring-color 的默认效果，在你现有样式中加入 -webkit-focus-ring-color: transparent !important; 即可清除。
如果修改后仍有轮廓，可排查两点：

1. 是否存在全局的 :focus-visible 默认样式没有被你的表单规则覆盖
2. 输入框父元素是否在 focus 状态下有 border 或 box-shadow 样式被触发

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