[解決済み] 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の「ぼかし半径」で完全にカバーすることができます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン