在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
SASS
input:-webkit-autofill
&,
&:hover,
&:focus,
&:active
transition-delay: 9999s
transition-property: background-color, color
其他回答
对于使用Compass的用户:
@each $prefix in -webkit, -moz {
@include with-prefix($prefix) {
@each $element in input, textarea, select {
#{$element}:#{$prefix}-autofill {
@include single-box-shadow(0, 0, 0, 1000px, $white, inset);
}
}
}
}
两年后线复活。我围绕着这个问题工作了几天,发现了一个简单的技巧来防止这个丑陋的自动完成功能:
只需添加一个随机字符串来形成目标,如<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。它更容易。
除此之外:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
你可能还想补充
input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
另一方面,当你点击输入时,黄色会回来。 对于焦点,如果你使用bootstrap,第二部分是用于边界突出显示0 0 8px rgba(82, 168, 236, 0.6);
这样它看起来就像任何自举输入。
这对我很有用。
.input:-webkit-autofill{过渡:background-color 5000 0s ease-in-out 0;}
SASS
input:-webkit-autofill
&,
&:hover,
&:focus,
&:active
transition-delay: 9999s
transition-property: background-color, color