Question

可能重复：
Google Chrome form autofill and its yellow background

是否可以从web-kit元素中移除background黄色和非常糟糕的input？

查看图片 enter image description here

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

这不起作用：

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

我在使用Chrome的Mac OSX上

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工具包浏览器。

Answer 4

您需要关闭此字段的自动填充功能：

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

如果你想使用自动完成并且总是使用自定义背景颜色进行输入，那很遗憾是不可能的。以下是Chromium跟踪器中http://code.google.com/p/chromium/issues/detail?id=46543的问题。

删除Webkit输入背景

4 个答案: