在我正在处理的一个表单上,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;
}
其他回答
这招对我很管用:
padding: 5px;
background-clip: content-box;
这将适用于正常、悬停、聚焦和激活状态下的输入、文本区和选择。
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
下面是上述解决方案的SCSS版本,供使用SASS/SCSS的人使用。
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
&, &:hover, &:focus, &:active{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
}
你可以改变输入框的样式以及输入框内的文本样式:
在这里你可以使用任何颜色,例如白色,#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的“模糊半径”将完美地覆盖它。
我放弃!
由于没有办法用自动补全来改变输入的颜色,我决定禁用所有这些webkit浏览器用jQuery。是这样的:
if (/webkit/.test(navigator.userAgent.toLowerCase())) {
$('[autocomplete="on"]').each(function() {
$(this).attr('autocomplete', 'off');
});
}
我们可以使用-webkit-autofill伪选择器来定位这些字段,并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色,但大多数其他属性都适用于此,例如border和font-size。我们甚至可以使用-webkit-text-fill-color来更改文本的颜色,下面的代码片段中包含了它。
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}