2020/09/02

Chromeのautocompleteの色(背景&テキスト)が変わるのをCSSで回避する

csshtml

概要

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で回避することができました。