2020/09/02
Chromeのautocompleteの色(背景&テキスト)が変わるのをCSSで回避する
概要
Chomeでメールアドレス・パスワードの入力要素に対して、自動選択(autocomplete)を行った時に
意図しない背景色とフォントカラーになっていたので、それを上書きできるようにしました。
実装内容
sassを使っているので、sassの定義に以下を追加しました。
input:-webkit-autofill
-webkit-box-shadow: 0 0 0 1000px #373740 inset // 好きな色を背景色に指定できる
-webkit-text-fill-color: #ffffff // 好きな色をフォントカラーに指定できる
cssなら以下ですね。
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #373740 inset;
-webkit-text-fill-color: #ffffff;
}
こちらで、Chromeのautocompleteの背景色とフォントカラーが変わるのをCSSで回避することができました。