关于input出type设置password出现黄色背景和默认内容

Question

只要设置了type为password就会出现黄色的背景和默认的内容。
请问这是什么原因？
我该如何解决？

Answer 1

input:-webkit-autofill {

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

}

Answer 2

是 谷歌浏览器吗？ 这是浏览器的记住账号密码的机制。

不用纠结这个问题，每个浏览器都是不一样的，safari 的会美观一点

Answer 3

你可以把自动补全，或者缓存去掉就可以了

Answer 4

1 通常我们会在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"
?
1
2
3
4
<form method="post" action="" name="login" autocomplete="off">
</form>
//或者
<input id="name" type="text" name="name" maxlength="20" autocomplete="off">
2 但是有一种情况例外，就是表单中有input[type="password"]，点击保存密码后，在Chrome浏览器则自动填充了用户名和密码的输入框；为了统一样式，我们需要就对Chrome的问题经行单独处理。
总结了4种解决方案，如下：
1 修改disabled属性
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
var inputers = document.getElementsByTagName("input");
for(var i=0;i<inputers.length;i++){

if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){ 
 inputers[i].disabled= true; 
} 

}
setTimeout(function(){

for(var i=0;i<inputers.length;i++){ 
 if(inputers[i].type !== "submit"){ 
  inputers[i].disabled= false; 
 } 
} 

},100)
}
2 去除输入框的name和id属性
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
var inputers = document.getElementsByTagName("input");
for(var i=0;i<inputers.length;i++){

if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){ 
 var input = inputers[i]; 
 var inputName = inputers[i].name; 
 var inputid = inputers[i].id; 
 inputers[i].removeAttribute("name"); 
 inputers[i].removeAttribute("id"); 
 setTimeout(function(){ 
  input.setAttribute("name",inputName); 
  input.setAttribute("id",inputid); 
 },1) 
} 

}
}
3.可以在不需要默认填写的input框中设置 autocomplete="new-password"

Answer 5

以前也遇到过，这是谷歌浏览器自带的，解决方法如下
//消除google浏览器黄色框
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {

  box-shadow:0 0 0 60px #eee inset;
  -webkit-text-fill-color: #878787;

}