Override browser form-filling and input highlighting with HTML/CSS

html css input autofill

219,244

Solution 1

for the autocompletion, you can use:

<form autocomplete="off">

regarding the coloring-problem:

from your screenshot i can see that webkit generates the following style:

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

1) as #id-styles are even more important than .class styles, the following may work:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) if that won't work, you can try to set the style via javascript programmatically

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) if that won't work, ~~you're doomed :-)~~ consider this: this wont hide the yellow color, but will make the text readable again.

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

4) a css/javascript solution:

css:

input:focus {
    background-position: 0 0;
}

and the following javascript has to be run onload:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

eg:

<body onload="loadPage();">

good luck :-)

5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) From here:

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

Solution 2

Trick it with a "strong" inside shadow:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

Solution 3

Add this CSS rule, and yellow background color will disapear. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Solution 4

After 2 hours of searching it seems Google Chrome still overrides the yellow color somehow, but I found the fix. It will work for hover, focus etc. as well. All you have to do is to add !important to it.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

this will completely remove yellow color from input fields

Solution 5

<form autocomplete="off">

Pretty much all modern browsers will respect that.

View more solutions

219,244

casraf

I make fully fledged, production-ready systems for start-ups and businesses. Also apps & others as hobbies :) Most proficient in React/TypeScript, Flutter. Contact me for availability at [email protected] Or visit my website/blog at casraf.blog

Updated on May 12, 2022

Comments

casraf almost 2 years

I have 2 basic forms: sign in and sign up, both on the same page. Now, I have no problem with the sign in form auto-filling, ~~but the sign up form auto fills as well, and I don't like it.~~

Also, the form styles get a yellow background which I can't manage to override and I don't want to use inline CSS to do so. What can I do to make them stop being colored yellow ~~and (possibly) auto filling~~?
- benzado about 14 years
  
  You're really asking two questions here: How to disable form autofill? -AND- How to override yellow background when form autofill is enabled? This wasn't clear until I read all the comments in the answers below. You might want to consider editing your question (especially since you've gone as far as to offer a bounty).
- casraf about 14 years
  
  You're right, edited. Or a lazy version of it anyways.
- Byran Zaugg about 14 years
  
  As a user of the form, I'd hate to have my usability crippled because of your visual preferences by forcing auto complete and highlighting off. Let the user turn this off, not you. Leave my browsing experience alone.
- casraf about 14 years
  
  That's the thing, I only disabled autocomplete in the REGISTRATION form, which basically, shouldn't have regular autocomplete, the completion info is only created once you've signed up. As for the login form, I want to keep autocomplete on, but just disable the dumb color it puts on the input fields because the text inside becomes unreadable -- the background is yellow and the text color is white (original background is dark gray).
- zzzzBov over 11 years
  
  possible duplicate of Google Chrome form autofill and its yellow background
- casraf about 11 years
  
  @zzzzBov check the dates, seems like your link is a duplicate of mine.
- zzzzBov about 11 years
  
  @OhMrBigshot, while duplicates typically are resolved in favor of the older question, there is also a tendency to resolve in favor of the question with more votes and or better answers. While yours is obviously a good question, the linked question has more votes (the people have spoken: images > words) and I feel that the answers are better.
- zzzzBov about 11 years
  
  That all said, I don't mind if you manage to get the other question closed as a duplicate of yours.
- Pixelomo about 9 years
  
  I really wish Google had chosen a less haggard colour than that yellow as the default background colour
- Admin over 7 years
  
  codepen.io/richardos/pen/RoBdxv
casraf about 14 years

Awesome, but it only solves the less important issue; how can I keep auto complete but lose the style ( prntscr.com/4hkh ) webkit shoves down its throat? o: thanks though
Jason Kester about 14 years

Actually, it should do both. The box only turns yellow to let you know that chrome/safari/ff has autofilled it with your password. If you tell it not to fill, it won't get a chance to color it in.
casraf about 14 years

yes, but look at what I said: "how can I keep auto complete but lose the style webkit shoves"
Joe Dargie about 14 years

Only problem with autocomplete is that it’s invalid in HTML before version 5.
casraf about 14 years

(1) doesn't work. I'll try (2) when I get back home; hopefully JS can override this; thanks :)
Torandi over 13 years

Chrome seems to ignore the !important when it autofills input-fields
zneak over 13 years

@Torandi It might be because of the user-agent stylesheets. Settings from user-agent stylesheets should apply last, unless it has the !important directive, in which case it takes precedence over everything else. You should check out your user agent stylesheet (though I don't know where to find it).
ruruskyi over 11 years

(4) definitely removes yellow :focus border.
ruruskyi over 11 years

doesn't work in both chrome and safari. style is input:-webkit-autofill and input --webkit-autocomplete simply doesn't exist
Mathijs Segers over 10 years

I believe it will but wouldn't it be a bit harsh to do this 50 times each second? I know it'll work and won't be too slow. But seems a bit too much.
Mathijs Segers over 10 years

If the last bit does not work for you, and you do know how javascript works (got the Id's right etc.) You could have the issue I had, I'm using jquery mobile for some reasons and this inits later and replaces the inputs it seems. So what I did is set an interval which clones it every 50 ms (it worked after 400ms using setTimeout but I don't want to risk slow connections). And after a second the interval is removed: code
Mathijs Segers over 10 years

var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},100‌0);
o_O over 10 years

+1000 (if I could) Yeah I can't figure any other way to do this. This is really intrusive of webkit...
Kris over 10 years

@EliseuMonar: I'm pretty sure I wasn't lying, but can't remember details of how or where I tested it. The code itself was probably typed from memory, not copy/pasted, so autocomplete vs. autofill? I dunno.
Jack R-G almost 10 years

I'm having a similar problem with Safari on Mavericks. But when I employ method 5, they duke it out for one second (or three seconds when I set the timeout to 3000) and then the browser wins and I've got autocomplete turned on. In my usage case, I'm asking the user for their username/password for another site so that I can pull info from the other site, so I definitely don't want it autofilling the username and password they use for my site. Any thoughts on this (besides the doom of the original #3)?
Eric Bieller almost 10 years

This is absolutely amazing, very creative solution, +allthepoints
Luke Madhanga over 9 years

What I like about this is most people WOULDN'T appreciate the whole form not being filled in on a page reload (e.g. a long text area), but allows the developer to prevent certain elements from being filled in (e.g. bank card number). Annoyingly though, support for this attribute is ceasing
Pixelomo about 9 years

awesome this should be the number one answer, simple and effective
masgrimes about 9 years

Very clever! Works well in Chrome.
Attenzione almost 9 years

doesn't work for background if i want to remove it (transparent)
Arturo Torres Sánchez almost 9 years

This is the only way to change text color in Chrome (at least in version 43)
squarecandy about 8 years

This is awesome in that it works and is really creative. But it reminds me of old IE6 hacks and the like. Kinda crappy of google to give us a :-webkit-autofill parameter and not let designers override the default, right?
jennEDVT almost 8 years

This worked for me - thanks! (though I needed to change white to the color I actually wanted)
casraf over 7 years

Well autocomplete is part of the standard, though it's usage & implementation may vary. Also, changing input types in IE fails spectacularly, which is why jQuery blocks it, but generally it's not a good idea if you plan to support IE developer.mozilla.org/en-US/docs/Web/Security/…
volodymyr3131 over 7 years

@casraf Sorry, it is a part of standart, but it don't work in all modern browsers as it must, so it will not do the thing it was invented for. In EDGE it works fine, about previous versions can't tell anything(
casraf over 7 years

True, it's not implemented everywhere. The problem still stands - depending on how far back you want to support IE - before v 11, I don't believe you can change the input type. If you're not worried about old versions, then you might as well use autocomplete=off, as it works in FF, Chrome for a while, and IE as of the previous version or so
volodymyr3131 over 7 years

I've tried to use autocomplete=off, both for inputs and form, and Chrome still fill signup and signin forms data(. This is just some kind of strange magic, because based on the comments, in some cases it works, and in some it does not =)
casraf over 7 years

I know, these standards are not really being followed consistently. It's a shame, makes our lives harder :(
volodymyr3131 over 7 years

Yes, I thought that Safari < 9 and IE < 10 supporting will be enought pain for the developers, but things like this just makes me crazy!)
Brandon Harris over 7 years

Clearly the best answer.
Luis Lopez almost 7 years

It works for me without the 1000px, just 0 everywhere, -webkit-box-shadow: 0 0 0 0 white inset !important;
neiya over 4 years

This yellow background is meant to help users be aware that these values are actually stored in the browser. You might not like it, but removing it while keeping the behavior is actually reducing usability and accessibility
Lunster over 4 years

Providing a color choice that cannot be customised isn't helping usability, nor accessibility. Those concerns are still entirely in the hands of the dev, except for this frustrating hack in Chrome. No-one can fault the intention of the Chrome devs, just the results.
Louis Sankey about 3 years

This is the only solution in case you want to have a transparent background
Zaffer almost 3 years

what about using .autofill-fix ?
Kavindu Pasan Kavithilaka almost 3 years

@Kerry7777 This is the only solution worked for me. And it's the simplest one. You made my day
gyo over 2 years

Disabling "autocomplete" is not a good UX solution.
Lars Ejaas over 2 years

Doesn't work in chrome 96.0 The -internal-light-dark styling from chrome is overwriting everything. They even added !important styling so you can't overwrite it! This makes no sense when we cannot programmatically change the user's light/dark preferences in the browser...