覆盖google chrome中保存的密码字段的样式
覆盖google chrome中保存的密码字段的样式
提问于 2011-06-09 00:48:26
我正在设计一个web应用程序，一般的风格是在深色背景上使用白色文本。
此样式包括对用户名和密码字段使用自定义(深色)图像，并使用白色文本。
如果用户使用google chrome登录，并选择将他们的登录详细信息保存到表格中，在下次访问时，用户名和密码字段将显示为浅黄色和白色文本，几乎无法阅读。看起来真的很糟糕。
我该如何重写这个样式，防止google chrome更改保存的用户名和密码字段的背景。
<style type="text/css">
input {
border: none;
background: url('darkinput.png');
color: #fff;
}
</style>
<input type="text" name="email" id="text" />
<input type="password" name="password" id="text" />编辑:目前(google-chrome v11.0.696.57)用户代理样式表包含！重要的覆盖来设置以下两项：
input:-webkit-autofill{
background-color: rgb(250, 255, 189) !important;
background-image: none !important;
}在下面的url上有一个关于这方面的问题报告，我鼓励每个阅读这篇文章的人投票支持它：
http://code.google.com/p/chromium/issues/detail?id=46543
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-06-09 05:04:03
要完全禁用自动完成(从而消除样式问题)，您可以尝试执行以下操作：
<form autocomplete="off">
...
</form>然而，另一种可能是在页面加载后使用jquery删除样式。
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});}Stack Overflow用户
发布于 2015-11-13 15:59:09
只需设置一个阴影就可以解决这个问题：
input:-webkit-autofill {
-webkit-box-shadow:200px 200px 100px white inset;
box-shadow:200px 200px 100px white inset;
}Stack Overflow用户
发布于 2015-11-18 02:13:30
要重置样式，请执行以下操作：
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}这对我很有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6282325
复制相关文章
相似问题
腾讯云开发者
