Change the background of input filled in by Chrome autocomplete

Asked

Viewed 9,155 times

11

I am creating a form, and as everyone knows, the browser has the option "auto-fill", so far so good, but I came across the following situation:

Campo com fundo amarelo

As you can notice in the image above, the field that was filled automatically, was with the yellow background and we agree that many of the times this situation disadvantages for simply having a color that is not part of the design.

In a survey here at Sopt, found this reply in the question How to remove auto complete input from google Chrome?, but it’s not what I need because I don’t want to disable the option "auto-fill".

My question: It is possible to change the background color without disabling the option "auto-fill"? If yes: How to do this ?

css

4 answers

9


You can change the CSS of the fields that are filled automatically 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 the background-color transparent.

6

Recently Chrome changed the color of Autofill of inputs for a shade of Light Blue, but apparently the old techniques continue to work...

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

I will post only one alternative that I thought was cool, and sometimes might be more useful to someone. The idea here is since the input has a colour, even if it is the colour defined by user-agent, vc can still use a rotation of the original input color matrix and basically have any color, vc can still put more of a filter like the saturate() to have even more pronounced colors.

inserir a descrição da imagem aqui

Here you can read more about the filter hue-rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate

Follows the code

[type="password"],
[type="email"] {
    filter: saturate(1) hue-rotate(0deg);
    animation: nome 5s infinite linear;

/* cor original do User-Agent do Chrome */
    background-color: rgb(232, 240, 254) !important;
/* estylos não obrigatórios */
    min-height: 52px;
    font-size: 1.7rem;
    line-height: 20px;
    padding: 0 15px;
    border-radius: 6px;
    border: 1px solid #666;
    
}
@keyframes nome {
    0% {
        filter: saturate(1) hue-rotate(0deg);
    }
    100% {
        filter: saturate(10) hue-rotate(360deg);
    }
}
    </style>
</head>

<body>
<input type="email" value="seu email" name="" id="">
<br><br>
<input type="password" value="password" name="" id="">

3

This way it is with 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;
}

3

To complete the @Laérciolopes reply you can also change the background color of the fields select and textarea which have been 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;
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.