Removing Web Dial Entry Background

Question

Possible duplicate:
Google Chrome form auto-completion and its yellow background

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

See image

I tried with a simple background:#fff; but it does not work.

This does not work:

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

I'm on Mac OSX with Chrome

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

The only solution I found was code that works with jQuery, but I don't want to remove convenient autocomplete from inputs:

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

Answer 1

Holy cow! It seems to work at last. There is one caveat in which, until new DOM elements appear, the flash is still yellow. This seems completely inevitable . Thanks to NullPointer for the original concept, although the implementation did not quite work as originally published.

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 tried the following and solved my problem (removed the yellow color), so I hope this also helps you

I tried css

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

I also tried jquery and they both worked

 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 3

I think this is possible. You can try to put !important after the color declaration, but unfortunately I do not have a web kit browser that I can check.

Answer 4

You need to disable autocomplete for this field:

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

If you want to use autocomplete and always use a custom background color for input, unfortunately this is not possible. Here's a question about it in the Chromium tracker http://code.google.com/p/chromium/issues/detail?id=46543 .