Destacar campos preenchidos automaticamente pelo navegador que o usuário não editou com CSS :autofill

Use o CSS :autofill para destacar os campos que foram (ou não) preenchidos automaticamente, ajudando o usuário a concluir o formulário.

Como fazer a implementação

Para destacar um campo de formulário que foi preenchido automaticamente pelo navegador (e não editado pelo usuário), adicione um seletor ao CSS usando a classe :autofill. Isso pode ser usado para um elemento <input>, <select> ou <textarea>.

Ao estilizar estados preenchidos automaticamente, siga as práticas recomendadas de acessibilidade:

• Vários indicadores de estado: não use apenas a cor da borda para indicar o estado de preenchimento automático. Use vários indicadores, como espessura da borda e sombreamento de fundo personalizado, para garantir que o estado seja perceptível.
• Preserve os indicadores de foco: nunca remova os contornos de foco (outline: none) sem oferecer uma substituição clara e de alto contraste para usuários de teclado.

O exemplo a seguir usa :autofill para definir uma borda e um plano de fundo personalizados, além de estilos de foco explícitos:

input:autofill,
input:-webkit-autofill {
  /* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
  border: 2px solid #2e7d32;
  box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}

/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

Como mostrado neste exemplo, a propriedade box-shadow é usada para personalizar o plano de fundo, já que background-color não pode ser substituído diretamente em campos preenchidos automaticamente.

Use o nome correto da pseudoclasse CSS

Não use :auto-fill: isso está incorreto.

MANDATORY: Use :autofill as this is the correct pseudo-class name.

Estratégias de fallback

A pseudoclasse :autofill é um aprimoramento progressivo. Em navegadores que não oferecem suporte, o formulário ainda vai funcionar normalmente, mas as entradas não vão receber o destaque personalizado de preenchimento automático. Os usuários ainda poderão preencher o formulário. Não use nenhum substituto de JavaScript adicional.