5

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 imageenter 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');
}
Improve this question
13
  • from where this background came from? It is not default Commented Oct 12, 2012 at 7:37
  • 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. Commented Oct 12, 2012 at 7: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 Commented Oct 12, 2012 at 7:38
  • Also, can you share the url where you're seeing this? Commented Oct 12, 2012 at 7:39
  • 1
    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. Commented Oct 12, 2012 at 10:28

4 Answers 4

Reset to default
2

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

    });

}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That is horribly hacky but I've found no other way so here is your plus one.
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);
        });
    });
}
Improve this answer

12 Comments

You're trying to answer a question to which he has provided few details so far. Its like stabbing in the dark.
@Geuis but i think my answer provide the solution
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 cool .... i trued this in my website and its the working one .. so i thought that its helpful for the OP ...
NP, do a minor edit on your answer so I can remove the downvote =)
|
-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.

Improve this answer

Comments

-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.

Improve this answer

4 Comments

but i want the autocomplete :/
meeeee??? i just added 1 downvote me is not is downvoting :/
i tryed and it works removing autocmplete but i don't like to remove user presetted data :(
check i edited my question @bjornd

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.