javascript - 移除 Web-kit 输入背景

Question

可能重复：
Google Chrome 表单自动填充及其黄色背景

有可能从元素中去除web-kit黄色和非常糟糕的东西吗？backgroundinput

看图片

我尝试了简单background:#fff;但它不起作用。

这不起作用：

input[type="text"],input[type="password"],textarea{
    border:1px solid #ccc;
    min-height:30px;
    padding:1%;
    background: #fff !important;
  }

我在 Mac OSX 上使用 Chrome

http://jsfiddle.net/J6Y9s/2/

我发现的唯一解决方案是使用 jQuery 的这段代码，但我不想从输入中删除舒适的自动完成功能：

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
}

Answer 1

我已经尝试了以下方法并解决了我的问题（去除黄色）所以我希望这对你也有帮助

我试过css

input:-webkit-autofill {
    color: #f5f5f5!important;
}

我也尝试过 jquery 并且两者都在工作

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Answer 2

天啊！这似乎终于奏效了。有一个警告，在添加新的 DOM 元素之前仍然会出现黄色闪烁。这似乎是完全不可避免的。感谢 NullPointer 提供了最初的概念，尽管实现并没有像最初发布的那样工作。

http://jsfiddle.net/a6Pqy/

HTML：

<form method="post" id="frm">
    First name:<input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    E-mail: <input type="text" name="email" /><br />
    Phone: <input type="text" name="phone" /><br />
    Address: <input type="text" name="address" /><br />
</form>​

JS：

//This is one hackish piece of code. Please encourage the Chromium group to FIX THIS BUG http://code.google.com/p/chromium/issues/detail?id=46543

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

    //must clear the contents of the element on focus or the Chrome autocomplete monstrosity doesn't respond to the 'input'event since it may already have pre-populated content from before.
    $(document).on('focus', '#frm > input', function(){
       $(this).val(''); 
    });

    //listen for the input event, meaning autocomplete may have occurred
    $(document).on('input', '#frm > input', function(){

         //setTimeout is critical because it delays the rendering engine by a frame so that the following selector grabs all valid -webkit-autofill inputs            
        setTimeout(function(){
            $('input:-webkit-autofill').each(function(){

                var val = $(this).val(),
                    attributes = $(this)[0].attributes,
                    el = $('<input>');

                //we make an entirely new element and copy all of the old attributes to it. jQuery doesn't offer a native way to do this.
                for(var i=0; i<attributes.length; i++){
                     el[0].setAttribute( attributes[i].nodeName, attributes[i].nodeValue );
                }
                //set the autocompleted value to the new element
                el.val( val );

                //insert the new element then remove the old one.
                $(this).after(el).remove();

            });

        },0);

    });

}

Answer 3

我相信这是可能的。您可以尝试!important在颜色声明之后放置，但不幸的是，我在这里没有可以测试的 web-kit 浏览器。

Answer 4

您需要关闭此字段的自动完成功能：

<input name="password" type="text" autocomplete="off"/>

如果您想使用自动完成并始终使用自定义背景颜色作为输入，那么不幸的是这是不可能的。这是 Chromium 跟踪器http://code.google.com/p/chromium/issues/detail?id=46543中的一个问题。