在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。
我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。
有可能阻止Chrome改变这些字段的颜色吗?
当前回答
谢谢便雅悯!
Mootools解决方案有点棘手,因为我不能通过使用$('input:-webkit-autofill')来获取字段,所以我使用的是以下内容:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
window.addEvent('load', function() {
setTimeout(clearWebkitBg, 20);
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
$(elems[i]).addEvent('blur', clearWebkitBg);
}
});
}
function clearWebkitBg () {
var elems = getElems();
for (var i = 0; i < elems.length; i++) {
var oldInput = $(elems[i]);
var newInput = new Element('input', {
'name': oldInput.get('name'),
'id': oldInput.get('id'),
'type': oldInput.get('type'),
'class': oldInput.get('class'),
'value': oldInput.get('value')
});
var container = oldInput.getParent();
oldInput.destroy();
container.adopt(newInput);
}
}
function getElems() {
return ['pass', 'login']; // ids
}
其他回答
除此之外:
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);
这样它看起来就像任何自举输入。
这是这个任务的复杂解。
(function($){ if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $('input, select').on('change focus', function (e) { setTimeout(function () { $.each( document.querySelectorAll('*:-webkit-autofill'), function () { var clone = $(this).clone(true, true); $(this).after(clone).remove(); updateActions(); }) }, 300) }).change(); } var updateActions = function(){};// method for update input actions updateActions(); // start on load and on rebuild })(jQuery) *:-webkit-autofill, *:-webkit-autofill:hover, *:-webkit-autofill:focus, *:-webkit-autofill:active { /* use animation hack, if you have hard styled input */ transition: all 5000s ease-in-out 0s; transition-property: background-color, color; /* if input has one color, and didn't have bg-image use shadow */ -webkit-box-shadow: 0 0 0 1000px #fff inset; /* text color */ -webkit-text-fill-color: #fff; /* font weigth */ font-weight: 300!important; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="name" autocomplete="name"/> <input type="email" name="email" autocomplete="email"/>
我有一个纯CSS解决方案,使用CSS过滤器。
filter: grayscale(100%) brightness(110%);
灰度滤镜将黄色替换为灰色,然后亮度删除灰色。
看到CODEPEN
一个可能的解决方法是设置一个“强”内阴影:
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;
}
要有一个透明的背景,同时不使用时间延迟(特别是在现代web应用程序中,人们可以停止使用它一段时间,并希望界面的行为是可预测的),使用这个:
input:-webkit-autofill {
-webkit-background-clip: text;
}
身体{ 背景:lightblue; } 输入{ 背景:透明; } 输入。no-autofill-bkg: -webkit-autofill { -webkit-background-clip:文本; } <input type="text" name="email" /> <input type="text" name="email" class="no-autofill-bkg" />
工作环境:Chrome 83 / 84.0.4147.89, Edge 84.0.522.44
如果你决定重新发布我的解决方案,我只要求你包括我的名字或链接到这个。