Html 删除自动填充输入时的黄色背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29120333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove the yellow background on input on autofill
提问by Juliver Galleto
Anyone knows how to remove this ugly chrome background when autofill? (Refer below.)
任何人都知道如何在自动填充时删除这个丑陋的镀铬背景？（请参阅下文。）
So far I tried:
到目前为止，我尝试过：
*:focus {
outline: 0;
}
input:-webkit-autofill {
-webkit-box-shadow: none;
-webkit-text-fill-color: #fff !important;
}
button:focus, input:focus, a:focus {
text-decoration: none !important;
outline: none !important;
}
Sadly, none of them works. Any help, ideas, clues, suggestions would be greatly appreciated.
可悲的是，它们都不起作用。任何帮助、想法、线索、建议将不胜感激。
回答by Ryan McDonough
Oddly enough this is the intended behaviourfrom webkit to let the user infer it was autofilled.
奇怪的是，这是webkit的预期行为，让用户推断它是自动填充的。
[email protected] We inherit this coloring behavior from WebKit and I believe it's by design. It allows the user to understand the data has been prefilled.
[email protected] 我们从 WebKit 继承了这种着色行为，我相信这是设计使然。它允许用户了解已预先填充的数据。
You can use:
您可以使用：
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Which will change the background to white.
这会将背景更改为白色。
You can also turn auto complete off by adding:
您还可以通过添加以下内容来关闭自动完成功能：
autocomplete="off"
E.g
例如
<input type="text" name="some_name" autocomplete="off"></input>
To your input, but for usability I would suggest against this.
根据您的意见，但为了可用性，我建议不要这样做。
回答by Carl Boneri
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border:none !important;
-webkit-text-fill-color: inherit !important;
-webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
transition: background-color 5000s ease-in-out 0s;
}
This seems to fix the after-effect of the yellow re-populating on mouseleave
这似乎解决了在 mouseleave 上重新填充黄色的后遗症
回答by Amir
.form-item-search-block-form input:focus,
.form-item-search-block-form input:hover,
.form-item-search-block-form input:active {
outline: 0 none;
border: 0 none;
background: #282828;
background: url("../images/search_btn.png") no-repeat 96% 9px;
color: rgb(202,202,202);
}
.form-item-search-block-form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #282828 inset;
-moz-box-shadow: 0 0 0 1000px #282828 inset;
box-shadow: 0 0 0 1000px #282828 inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
-webkit-text-fill-color: #eee !important;
}
