chrome浏览器有缓存时候,自动填充会有淡黄色背景色,如何解决?
Others 2018-03-14 08:46:39 2018-03-14 08:46:39 2470 次浏览情景一:input文本框是纯色背景的
解决办法:
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333;
}
情景二:input文本框是使用图片背景的
解决办法:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{ var _interval = window.setInterval(function () { var autofills = $('input:-webkit-autofill'); if (autofills.length > 0) { window.clearInterval(_interval); // 停止轮询 autofills.each(function() { var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20); }
思路二: 关闭浏览器自带填充表单功能
<p style="box-sizing:border-box;margin-top:1.5em;margin-bottom:1.5em;color:#333333;font-family:-apple-system, "font-size:14px;white-space:normal;background-color:#FFFFFF;">
设置表单属性 <code style="box-sizing:border-box;font-family:"font-size:0.93em;padding:2px 4px;color:#C7254E;background-color:#F9F2F4;border-radius:4px;">autocomplete="off/on"</code> 关闭自动填充表单,自己实现记住密码
</p>
<div class="widget-codetool" style="box-sizing:border-box;position:relative;margin-top:0px;color:#333333;font-family:-apple-system, "font-size:14px;white-space:normal;background-color:#FFFFFF;">
<div class="widget-codetool--inner" style="box-sizing:border-box;position:absolute;top:-10px;right:0px;z-index:1;height:24px;background-color:rgba(0, 0, 0, 0.75);padding:0px 5px;">
<span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选" style="box-sizing:border-box;cursor:pointer;display:block;float:left;background-image:url("height:16px;width:16px;background-size:auto 16px;margin:4px 5px;opacity:0.5;"></span><span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- 对整个表单设置 -->