Remove Web-kit input background [duplicate]

Question

Possible Duplicate:
Google Chrome form autofill and its yellow background

Is possible to remove the web-kit yellow and really bad background from the input elements?

See the image

I tried with simple background:#fff; but it doesn't work.

This doesn't work:

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

I am on Mac OSX with Chrome

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

The only solution I've found is this code that is working with jQuery, but i don't want to remove the comfortable autocomplete from the inputs :

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

Answer 1

Holy Cow! This seems to work finally. There is one caveat, in which there is still a flash of yellow before the new DOM elements are added in. This appears to be completely unavoidable. Thanks to NullPointer for having the initial concept, though the implementation didn't quite work as originally posted.

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 2

I have tried the below and that solved the my problem (remove yellow color ) so i hope this is also helpful for you

i have tried the css

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

i have also tried the jquery and both were working

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