chrome下禁用input自动填充背景

最新推荐文章于 2025-03-27 15:20:21 发布

原创最新推荐文章于 2025-03-27 15:20:21 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

16 篇文章

订阅专栏

前端

16 篇文章

订阅专栏

本文介绍了一种仅使用CSS解决Chrome浏览器中输入框自动填充问题的方法，通过设置超长过渡时间，使渐变效果不可见，有效避免了自动填充带来的颜色样式问题。

大家在写css的时候一定遇到过chrome浏览器input框自动填充的问题，之前解决的办法都是用js去实现的，今天用另一种方法去实现，只需要用css就行了，实现原理就是利用渐变，只是时间设置长一些，也就看不出来了，也没有人会在登录页面停留 99999999s 的时间吧！下面是代码。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  -webkit-transition: background-color 99999999s ease-in-out 0s;
  transition: background-color 99999999s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-transition: background-color 99999999s ease-in-out 0s;
  transition: background-color 99999999s ease-in-out 0s;
}