☰

Chrome オートコンプリートの入力背景色を削除しますか? 質問する

tag-icon • tag-icon autocomplete input google-chrome
Chrome オートコンプリートの入力背景色を削除しますか? 質問する

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

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

Chrome がこれらのフィールドの色を変更するのを止めることは可能ですか?

ベストアンサー1

入力ボックスのスタイルと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;
}

アドバイス:数百や数千といった過度なぼかし半径は使用しないでください。これにはメリットがなく、低性能のモバイル デバイスではプロセッサに負荷がかかる可能性があります (実際の外側の影にも当てはまります)。通常の 20 ピクセルの高さの入力ボックスの場合、30 ピクセルの「ぼかし半径」で完全にカバーできます。

編集 2023:
透明性と背景色の変更機能の両方を実現するには:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

ここでの移行は最近の Chrome ブラウザでは何も行わず、古いバージョンの Chrome に対するフォールバック ソリューションにすぎないことに注意してください。

おすすめ記事