Chrome ブラウザ フォームの自動入力のデフォルト スタイル - 自動入力設定

1. エラー表示ステータスは次のとおりです。 入力ボックスはブラウザの組み込みフォーム入力機能をオフにする [autocomplete="off"] を使用していないため、自動入力が発生するとこのようなスタイルになります~

次に、入力ボックスのスタイルを見つけて、自動入力スタイルが図 2 に示されていることを確認します。

2.最初のステップを解決します。スタイルを次のように変更し、背景色を単色の影で覆います。

選択が完了すると表示は正常になりますが、図 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. 2 番目のステップを解決します。入力スタイル アニメーションの追加と設定を続けます。やっと完成しました〜

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