Chrome表单如何去掉默认的淡黄色背景及如何关闭浏览器自带填充表单功能？_屏蔽chrome浏览器针对input默认项背景色设置-CSDN博客

本文链接：https://blog.csdn.net/yanxiafei6/article/details/70240883

1、原因：表单自动填充元素在chrome下会有一个默认样式 （如下），并且优先级最高，无法覆盖（!important也无法覆盖）。


 
 
  
  
   
   
  
  
 
 
input:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

2、解决方法一：[1]input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景


 
 
  
  input:-webkit-autofill {
 
 
 
 
  
  -webkit-box-shadow: 0 0 0px 1000px white inset;
 
 
 
 
  
  border: 1px solid #CCC!important;
 
 
 
 
  
  }
 
 
如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

  
  
   
   
    
    input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
    
    }

[2]input文本框是使用图片背景的

把背景图片拿出来，独立成为一个标签如<label></label>等。

3、解决方法二：关闭浏览器自带填充表单功能

<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">