解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题

Posted Wayne Zhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题相关的知识,希望对你有一定的参考价值。

  如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!important的方法也无法去除。

 

解决方法一: 取消设置input表单的autofocus属性

 

解决方法二:对于没有背景图片的元素,添加下面的代码:

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

 

解决方法三: 对于有背景图片的元素,将背景图片拿出来,置于<label></label>中,再对input表单进行设置。

 

值得注意的是:除了chrome默认定义的background-color,background-image,color不能用 !important 提升其优先级以外,其他的属性均可使用!important提升其优先级。

以上是关于解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题的主要内容,如果未能解决你的问题,请参考以下文章

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

Chrome for Android显示自动填充即使自动填充:关闭

Chrome表单文本框自动填充黄色背景色样式

React中禁止chrome填充密码表单

React中禁止chrome填充密码表单