自动填充时输入框背景色为什么变黄了？怎么改掉？

W″统维提问于 2026-03-02 16:36:21 阅读 21

交互

我在做登录表单的时候，浏览器自动填充用户名密码后，输入框背景变成难看的黄色，试过用input:-webkit-autofill去覆盖样式但好像没生效，是我写法有问题吗？

这是我的CSS代码：

input:-webkit-autofill {
  background-color: #fff !important;
  color: #333 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

我来解答赞 2 收藏

反馈

1 条解答

UE丶艳平 Lv1

这个问题我当时也卡了好久，Chrome的自动填充样式优先级高得离谱，直接写background-color根本覆盖不了。

你的思路用box-shadow内阴影去遮盖背景是对的，但问题在于Chrome后来更新了，单纯写一个状态不够，得把所有状态都写上。

试试这个写法：

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;

    -webkit-text-fill-color: #333 !important;

    transition: background-color 5000s ease-in-out 0s;

}

这里有几个坑要注意一下。

第一，选择器要把hover、focus、active都加上，不然你一点击或者hover的时候黄色又冒出来了。

第二，文字颜色用-webkit-text-fill-color而不是color，因为Chrome自动填充时会把文字也锁死，普通color属性不生效。

第三，那个transition延迟是个骚操作，让背景色的过渡时间设成5000秒，等于变相禁用了浏览器自带的背景色变化。

还有个事，如果你项目里用了CSS预处理器或者框架，注意选择器别被其他样式冲掉了。我之前在Tailwind项目里踩过坑，得加!important或者调整选择器权重。

另外如果还是不生效，检查一下你的input是不是有其他类名在干扰，或者试试把这段CSS放到样式文件最后面，确保优先级。

2026-03-02 17:02