Estilo padrão de preenchimento automático do formulário do navegador Chrome - configuração de preenchimento automático

1. O status de exibição de erro é o seguinte : Como a caixa de entrada de entrada não usa [autocomplete="off"] para desativar a função de preenchimento de formulário integrada do navegador, o estilo fica assim quando ocorre o preenchimento automático ~

Em seguida, localize o estilo da caixa de entrada e descubra que o estilo de preenchimento automático é mostrado na Figura 2

2. Resolva o primeiro passo: modifique o estilo da seguinte forma e cubra a cor de fundo com a sombra da cor sólida.

Embora a exibição seja normal após a conclusão da seleção, ainda há um problema com o estado selecionado quando o mouse é clicado, conforme mostrado na Figura 3

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

3. Resolva a segunda etapa : continue a adicionar e definir a animação do estilo de entrada. finalmente pronto~

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}