webkit autofill 覆盖不了的hack方法

chrome自动填充表单的时候会有黄黄的背景,还有粗粗的边框,很难看。

但是 -webkit-autofill 的背景色又覆盖不了,很坑爹。

1、用内阴影遮盖:

        input:-webkit-autofill,
        textarea:-webkit-autofill,
        select:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 50px #fff inset;
            -webkit-text-fill-color: #666;
        }

2、用js删除原来的表单元素,给他clone一个一模一样的在后面插入

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)
}

3、给表单添加属性  autocomplete="off" ,禁止保存表单数据。不过好像没用的啊。。。

 

posted on 2015-06-02 14:51  孤云独去闲  阅读(495)  评论(0)    收藏  举报

导航