在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
一个可能的解决方法是设置一个“强”内阴影:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
其他回答
你可以改变输入框的样式以及输入框内的文本样式:
在这里你可以使用任何颜色,例如白色,#DDD, rgba(102, 163, 177, 0.45)。
但透明在这里行不通。
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
另外,你可以用它来改变文本的颜色:
/*Change text in autofill textbox*/
input:-webkit-autofill{
-webkit-text-fill-color: yellow !important;
}
建议:不要使用过多的模糊半径在数百或数千。这没有任何好处,而且可能会将处理器负载放在较弱的移动设备上。(也适用于实际的外部阴影)。对于一个普通的20px高度的输入框,30px的“模糊半径”将完美地覆盖它。
这可能有点晚了,但对于未来的参考,有一个CSS唯一的解决方案,Olly Hodgons在这里展示 http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour
您所要做的就是添加一个进一步的选择器来覆盖默认的输入字段设置 所以用而不是
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
仕
#login input:-webkit-autofill {
background-color: #ff00ff;
}
or
form input:-webkit-autofill {
background-color: #f0f;
}
这对我来说似乎很管用。
两年后线复活。我围绕着这个问题工作了几天,发现了一个简单的技巧来防止这个丑陋的自动完成功能:
只需添加一个随机字符串来形成目标,如<form action="site.com/login.php?random=123213">
它工作在最新的chrome版本34.0.1847.137
更新:如果它不起作用,给动作奇怪的协议,比如<form id="test" action="xxx://">,然后用javascript填充这个区域:
$('#test').attr('action', 'http://example.site/login.php');
更新2:仍然有问题,我决定完全删除<形式>标签和post变量通过jquery。它更容易。
之前添加盒子阴影的解决方案对于需要纯色背景的人来说效果很好。添加过渡的另一个解决方案是可行的,但必须设置持续时间/延迟将意味着在某个时候它可能会再次显示。
我的解决方案是使用关键帧代替,这样它将始终显示您选择的颜色。
@-webkit-keyframes autofill {
0%,100% {
color: #666;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
代码示例:https://codepen.io/-Steve-/pen/dwgxPB
试试这个: 和上面@Nathan-white的答案一样,只是做了一些小调整。
/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: all 5000s ease-in-out 0s;
transition-property: background-color, color;
}