Override browser form-filling and input highlighti

Question

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? Thanks in advance!

Answer 1

Autocomplete off is not supported by modern browsers. The easiest way to solve autocomplete I found was a little track with HTML and JS. The first thing to do is change the type of the input in HTML from 'password' to 'text'.

<input class="input input-xxl input-watery" type="text" name="password"/>

Autocomplete starts after window loaded. That's OK. But when the type of your field is not 'password', browser didn`t know what fields it must complete. So, there will be no autocomplete on form fields.

After that, bind event focusin to password field, for ex. in Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

In onInputPasswordFocusIn, just change the type of your field to password, by simple check:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

That`s it!

UPD: this thing doesn't work with disabled JavaSciprt

UPD in 2018. Also found some funny trick. Set readonly attribute to the input field, and remove it on the focus event. First prevent browser from autofilling fields, second will allow to input data.

Answer 2

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

Answer 3

This fixes the problem on both Safari and Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Answer 4

The screenshot you linked to says that WebKit is using the selector input:-webkit-autofill for those elements. Have you tried putting this in your CSS?

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

If that doesn't work, then nothing probably will. Those fields are highlighted to alert the user that they have been autofilled with private information (such as the user's home address) and it could be argued that allowing a page to hide that is allowing a security risk.

Answer 5

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: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
} 

Answer 6

The form element has an autocomplete attribute that you can set to off. As of the CSS the !important directive after a property keeps it from being overriden:

background-color: white !important;

Only IE6 doesn't understand it.

If I misunderstood you, there's also the outline property that you could find useful.