14

Estou a criar um formulário, e como é de conhecimento de todos que, o navegador tem a opção "preenchimento automático", até ai tudo bem, mas me deparei com a seguinte situação:

Campo com fundo amarelo

Como podem notar na imagem acima, o campo que foi preenchido automaticamente, ficou com o fundo amarelo e convenhamos concordar que muitas das vezes essa situação desfavorece por simplesmente ter uma cor que não faz parte do design.

Em uma pesquisa aqui no SOpt, encontrei esse resposta na pergunta Como remover auto complete de input do google Chrome?, mas não é o que eu preciso, pois não quero desabilitar a opção "preenchimento automático".

Minha pergunta: É possível mudar a cor do fundo sem desabilitar a opção "preenchimento automático"? Se sim: Como fazer isso ?

0

5 Respostas 5

12

É possível alterar o CSS dos campos que são preenchidos automaticamente com o seguinte código:

/* 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;
}

É necessário colocar alguma cor pois no momento não é possível colocar o background-color transparente.

6

Recentemente o Chrome trocou a cor do autofill dos inputs para um tom de Azul Claro, mas aparentemente as técnicas antigas continuam a funcionar...

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

Vou postar apenas uma alternativa que achei legal, e as vezes pode ser mais útil para alguém. A ideia aqui é é já que o input tem uma cor, mesmo que seja a cor definida pelo user-agent, vc ainda assim pode usar um rotação da matriz de cor de entrada original e basicamente ter qualquer cor, vc ainda pode colocar mais de um filtro como o saturate() para ter cores ainda mais acentuadas.

inserir a descrição da imagem aqui

Aqui vc pode ler mais sobre o filtro hue-rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate

Segue o código

[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="">

4

Dessa forma fica com fundo transparente e a cor do texto preta.


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

Para completar a resposta do @LaércioLopes também é possível alterar a cor do fundo dos campo select e textarea que foram preenchidos automaticamente.

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}
-3

Vi que a solução do @samuel-prado-almeida somente retarda a sobreposição total de cor por parte do browser, mas não soluciona, mas encontrei uma solução, citada nesse link: https://stackoverflow.com/a/14205976/1476872

Seguindo isso, fiz essa escolha de cores bem bizarras para ter certeza da modificação.

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px black inset !important;
    -webkit-text-fill-color: yellow !important;
  }

Detalhe importante: você deve dar um F5, mesmo que você faça uso do LiveReload.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .