删除Web工具包输入背景

Question

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

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

看图像

我尝试过简单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

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

\n\n

http://jsfiddle.net/a6Pqy/

\n\n

HTML：

\n\n

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

\n\n

JS：

\n\n

//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\n\nif (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {\n\n    //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.\n    $(document).on(\'focus\', \'#frm > input\', function(){\n       $(this).val(\'\'); \n    });\n\n    //listen for the input event, meaning autocomplete may have occurred\n    $(document).on(\'input\', \'#frm > input\', function(){\n\n         //setTimeout is critical because it delays the rendering engine by a frame so that the following selector grabs all valid -webkit-autofill inputs            \n        setTimeout(function(){\n            $(\'input:-webkit-autofill\').each(function(){\n\n                var val = $(this).val(),\n                    attributes = $(this)[0].attributes,\n                    el = $(\'<input>\');\n\n                //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.\n                for(var i=0; i<attributes.length; i++){\n                     el[0].setAttribute( attributes[i].nodeName, attributes[i].nodeValue );\n                }\n                //set the autocompleted value to the new element\n                el.val( val );\n\n                //insert the new element then remove the old one.\n                $(this).after(el).remove();\n\n            });\n\n        },0);\n\n    });\n\n}\n

\n