Remove Web-kit input background

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 enter image description here

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

Which browser are you using? If in Chrome, right-click on the yellow bit and choose Inspect Element. On the right side, you should see any css affecting it and the selectors and file names where its being set from. — Geuis, Oct 12 '12 at 07:38
for me it is default, maybe when browser remember your data .. cause i have 3 fields 1 is white background the other are yellowed, and the one with white background is the only one has no pre-setted data inside — itsme, Oct 12 '12 at 07:38
Then you need to setup a jsfiddle that replicates this so we can see. — Geuis, Oct 12 '12 at 07:42
Possible duplicate http://stackoverflow.com/q/2338102/733347 — Josh Davenport, Oct 12 '12 at 07:45
Ive got it triggered. I'm researching a solution. Of note, read the last couple comments on this bug. This is on someone's radar at chromium to fix, but its already been around for 4 years. http://code.google.com/p/chromium/issues/detail?id=46543 — Geuis, Oct 12 '12 at 08:09
@Geuis omg you're right, then i tested the NullPointer code below and it works, sure, but onyl at first page refresh!! incredible! — itsme, Oct 12 '12 at 08:11
lspuk, check out my answer below. I am pretty sure this is as close as we can get to what you want until/unless Google fixes the bug I linked to before. Good luck, this took 5 cigarettes and 90% of a fifth of scotch to figure out. — Geuis, Oct 12 '12 at 10:28

NullPoiиteя · Answer 1 · 2012-10-12T07:55:10.880

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

edited Oct 12 '12 at 07:55

answered Oct 12 '12 at 07:38

NullPoiиteя

53,430
22
120
137

You're trying to answer a question to which he has provided few details so far. Its like stabbing in the dark. – Geuis Oct 12 '12 at 07:44
@Geuis but i think my answer provide the solution – NullPoiиteя Oct 12 '12 at 07:45
Since I know this behavior is not a default in Chrome, there is some stylesheet or js that is causing it. Without seeing actual code, we cannot hope to give an accurate nor honest answer. – Geuis Oct 12 '12 at 07:46
@Geuis cool .... i trued this in my website and its the working one .. so i thought that its helpful for the OP ... – NullPoiиteя Oct 12 '12 at 07:47
NP, do a minor edit on your answer so I can remove the downvote =) – Geuis Oct 12 '12 at 07:48
hey guys here seems me i am the one is downvoting, really i downvoted 1 person only who told me to remove the autocmplete then didn't taouched votes :/ – itsme Oct 12 '12 at 07:54
@Geuis is that ok.... ?? – NullPoiиteя Oct 12 '12 at 07:55
@Ispuk is my answer is working for you .. since it was working for me – NullPoiиteя Oct 12 '12 at 07:57
for me nope i tryed deleting cache too, need to check boostrap css sec – itsme Oct 12 '12 at 07:57
then ..... navigator was not HTML5!? – itsme Oct 12 '12 at 07:58
@Ispuk cool than i am gonna delete my answer ... – NullPoiиteя Oct 12 '12 at 07:59
:D then sorry why color: instead of background: can you please document better the answer @NullPointer – itsme Oct 12 '12 at 08:00

score 2 · Accepted Answer · edited Jan 31 '13 at 20:45

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

    });

}

That is horribly hacky but I've found no other way so here is your plus one. — aintnorest, Dec 06 '14 at 01:25

score -1 · Answer 3 · answered Oct 12 '12 at 07:38

-1

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.

answered Oct 12 '12 at 07:38

Dave Hogan

3,165
4
28
53

bjornd · Answer 4 · 2012-10-12T08:23:32.533

-1

You need to turn off autocomplete for this field:

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

If you want use autocomplete and always use custom background color for the input it's unfortunately impossible. Here is an issue about that in the Chromium tracker http://code.google.com/p/chromium/issues/detail?id=46543.

edited Oct 12 '12 at 08:23

answered Oct 12 '12 at 07:42

bjornd

20,786
4
51
70

but i want the autocomplete :/ – itsme Oct 12 '12 at 07:43
meeeee??? i just added 1 downvote me is not is downvoting :/ – itsme Oct 12 '12 at 07:53
i tryed and it works removing autocmplete but i don't like to remove user presetted data :( – itsme Oct 12 '12 at 08:12
check i edited my question @bjornd – itsme Oct 12 '12 at 08:14

Remove Web-kit input background

4 Answers4