chrome表单全自动填充致使input文字框情况变为偏黄

2021-01-20 11:10 jianzhan
chrome表单全自动填充后,input文字框的情况会变为偏黄色的,这是因为chrome会默认设置给全自动填充的input表单再加input:-webkit-autofill独享特性,随后对其授予下列款式:

拷贝编码
编码以下:

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}

在一些状况下,这个黄色的情况会危害到大家页面的实际效果,特别是在大家给input文字框应用照片情况的情况下,原先的圆角和边框都被遮盖了:
 
场景1:input文字框是单色情况的

能够对input:-webkit-autofill应用充足大的单色内黑影来遮盖input键入框的黄色情况;如:

拷贝编码
编码以下:

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}

假如你有应用圆角等特性,或发现键入框的长度高宽比不太对,能够对其开展调剂,除chrome默认设置界定的background-color,background-image,color不可以用!important提高其优先选择级之外,别的的特性都可应用!important提高其优先选择级,如:

拷贝编码
编码以下:

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}

场景2:input文字框是应用照片情况的

这个较为不便,现阶段还没寻找完善的处理方式,有两种挑选:
1、假如你的照片情况不太繁杂,仅有1些简易的内黑影,那本人感觉彻底可使用上面详细介绍的方式用充足大的单色内黑影去遮盖掉黄色情况,此时只但是是沒有了原先的内黑影实际效果而已。
2、假如你确实想留住原先的内黑影实际效果,那就只能放弃chrome全自动填充表单的作用,应用js去完成,比如:

拷贝编码
编码以下:

$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('ul input:not(input[type=submit])').each(function(){
var outHtml = this.outerHTML;
$(this).append(outHtml);
});
});
}
10.});

遍历的目标将会要依据你的要求去调剂。假如你不想应用js,好吧,在form标识上立即关掉了表单的全自动填充作用:autocomplete=”off”。

有关在网上盛传的方式不见效的1些检测

这个难题困扰了我挺长1段時间的,在网上写的方式关键有2种:第1种是在款式里对input:-webkit-autofill重新写过background-color和color,应用!important提升其优先选择级。第2种是应用jquery,先分辨是不是是chrome,假如是,则遍历input:-webkit-autofill元素,再根据赋值,额外,移除等实际操作来完成。

可是我检测发现,这两种方式都不凑效!不知道道是伴随着chrome版本号的升級,如今的chrome(27)早已不适用重新写过input:-webkit-autofill原来的特性,還是如何回事。此外js也没法获得到chrome全自动填充的表单的value值,因此在网上盛传的应用jquery处理的方式也是不凑效,数最多也就只能去掉黄色情况,而全自动填充的value却被移除。chrome全自动填充的表单的value值是存在DocumentFragment里的div中的,假如有哪位童鞋了解如何获得chrome全自动填充的表单的value值,还请指教1下。