chrome浏览器自动填充背景色-webkit-autofill

CamilleZJ

已于 2022-10-10 16:32:11 修改

阅读量2k

点赞数 3

分类专栏： css 前端文章标签： chrome 前端

于 2022-10-10 16:09:01 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CamilleZJ/article/details/127245852

版权

前端同时被 2 个专栏收录

123 篇文章 2 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

输入框在chrome浏览器下显示白色背景，主要针对type为password的input，即使添加了非白色背景，仍然没用，看控制面板会有自动填充：input:-webkit-autofill的 background-color: rgb(250, 255, 189)!important;这个样式

尝试把自动填充关闭：autocomplete="off"，仍然没有用。

解决如下：

1、设置box-shadow 用阴影覆盖，这种方法比较适合纯色背景，不适合透明背景。


input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(67,118,144,0.5) inset;
}

input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px white inset;
     -webkit-text-fill-color: #333;
}

2、延长自动填充背景色的时间，如让颜色填充在“一万年”以后实现，这样短时间就看不到啦：

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    transition-delay: 5000s;
    transition: color 5000s ease-out, background-color 5000s ease-out;
    -webkit-transition-delay: 5000s;
    -webkit-transition: color 5000s ease-out, background-color 5000s ease-out;
  }