Remove Web-kit input background [duplicate]

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=46543if (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);    });}

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

I believe it is possible. You could try putting !important after the color declaration but I unfortunately don't have a web-kit browser here that I can test on.