input输入框背景色无法修改，被user agent stylesheet覆盖如何解决

问题原因排查及解决方案 #

常见原因1：浏览器自动填充（Autofill）样式覆盖 #

这是最容易触发user agent样式覆盖自定义样式的场景，浏览器会给记住账号密码后自动填充的input框强制设置默认背景色，优先级远高于普通类选择器。
适配代码如下，直接加到你的.authentication-form__input样式块中即可：

&:-webkit-autofill,
&:-webkit-autofill:hover, 
&:-webkit-autofill:focus {
  /* 用内阴影覆盖默认背景色，颜色和你自定义的background-color保持一致 */
  -webkit-box-shadow: 0 0 0 1000px darkblue inset !important;
  /* 自定义填充后的文字颜色，按需修改 */
  -webkit-text-fill-color: #ffffff !important;
  /* 避免自动填充时闪一下默认背景色 */
  transition: background-color 5000s ease-in-out 0s;
}

其他可排查的点 #

• 验证优先级问题：临时给你的background-color: darkblue加上!important标识，强制刷新页面看是否生效。如果生效说明是样式优先级冲突，优先排查上面的自动填充问题，或者检查项目中是否有其他权重更高的input样式规则。
• 检查混合宏内容：确认你引入的formBorder混合宏中没有定义background-color属性且未携带!important标识，避免混合宏的样式覆盖你后续写的背景色规则。
• 检查样式加载状态：打开浏览器开发者工具的元素面板，选中目标input框，查看样式栏中是否存在.authentication-form__input的样式规则，如果不存在说明SCSS编译失败或者CSS文件未正确引入。
• 清除浏览器缓存：强制刷新（Windows按Ctrl+F5、Mac按Shift+Command+R）页面，避免加载旧的缓存CSS文件。

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