Change the input background populated by Chrome autocomplete

Navigation
8

I'm creating a form, and as everyone knows, the browser has the "autocomplete" option, so far so good, but I came across the following situation: p>

Asyoucanseeintheimageabove,thefieldthatwasfilledinautomatically,hastheyellowbackgroundandweagreethatoftenthissituationisunfavorableforsimplyhavingacolorthatisnotpartofthedesign.

InasearchhereinSOpt,Ifoundthis answer in question How to remove auto complete from input google Chrome? , but it's not what I need, as I do not want to disable the "autocomplete" .

My question: Is it possible to change the background color without disabling the "autocomplete" option? If so: How to do this?

    
asked by anonymous 19.11.2017 / 14:55

3 answers

6

You can change the CSS of the fields that are automatically populated with the following code: 

/* Cor de fundo do autocomplete */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

/* Cor do texto do autocomplete */
input:-webkit-autofill {
    -webkit-text-fill-color: blue !important;
}
  

It is necessary to put some color because at the moment it is not possible to put background-color transparent.

    
19.11.2017 / 15:48
3

To complete the answer from @ LaércioLopes it is also possible to change the background color of the select and textarea fields that were filled in automatically. 

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}
    
21.11.2017 / 13:57
1

That way it's transparent background and the color of the black text. 


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid white;
  -webkit-text-fill-color: black !important;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}
    
06.12.2018 / 20:06
Why does Kotlin use a form of declaring functions and variables different from "traditional"? How to use Packages in Laravel 4?