1. ホーム
  2. autocomplete

[解決済み] Chromeのオートコンプリートで入力の背景色を削除する?

2022-03-18 03:12:54

質問

私が作業しているフォームで、Chromeが電子メールとパスワードのフィールドに自動入力をしています。これは問題ないのですが、Chromeは背景色を淡い黄色に変えてしまいます。

私が取り組んでいるデザインは、暗い背景に明るいテキストを使用しているので、これはフォームの外観を本当に台無しにします - 私は真っ黄色のボックスとほぼ見えない白いテキストを持っています。フィールドにフォーカスが当たると、フィールドは通常の状態に戻ります。

Chrome がこれらのフィールドの色を変更しないようにすることは可能ですか?

解決方法は?

入力ボックスのスタイルやテキストのスタイルを変更することができます。 input ボックスを使用します。

ここでは、任意の色を使用することができます。 white , #DDD , rgba(102, 163, 177, 0.45) .

しかし transparent はここでは動作しません。

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

さらに、これを利用して文字色を変更することができます。

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

アドバイスをお願いします。 ぼかし半径を数百、数千と過大にしないこと。これは何のメリットもありませんし、弱いモバイルデバイスではプロセッサに負荷をかける可能性があります。(実際の外側の影についても同様です)。高さ20pxの通常の入力ボックスの場合、30pxの「ぼかし半径」で完全にカバーすることができます。