Removing input background colour for Chrome autocomplete?

Question

On a form I\'m working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.

Answer 1

I have developed another solution using JavaScript without JQuery. If you find this useful or decide to re-post my solution, I only ask that you include my name. Enjoy. – Daniel Fairweather

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered. Simply changing the input field value does not suffice, Chrome wants an event. By focusing on each input field (text, password), we can send a keyboard event (the letter 'a') and then set the text value to it's previous state (the auto-filled text). Keep in mind that this code will run in every browser and will check every input field within the webpage, adjust it accordingly to your needs.

Answer 2

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

Answer 3

This works for me.

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

Answer 4

try this for hide autofill style

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

Answer 5

and this worked for me (Chrome 76 tested)

input:-internal-autofill-selected {
    background-color: transparent;
}

Answer 6

I have a pure CSS solution which uses CSS Filters.

filter: grayscale(100%) brightness(110%);

The grayscale filter replaces the yellow with grey, then the brightness removes the grey.

SEE CODEPEN