フォームをオートコンプリート（自動で入力）した時に背景が水色になる問題を解決する方法

フォームを入力する際にブラウザが自動で、名前やメールアドレスや住所を入力してくれるアレ（オートコンプリート）、すごく便利です。


でもオートコンプリートすると、インプットエリアが水色になるのイヤだな～サイトに合わないな～とずっと思っていた。
でもこれブラウザのやつだから絶対変えられないよね…って思って放置していましたが、実は変更できたんです。

その変更方法がコチラ↓↓↓

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset;
}

「input:-webkit-autofill」セレクタがオートコンプリート時の指定方法。
そこにbackgroundじゃなくbox-shadowで色を付けてるのが変更を難しくしている所でした。

ここでデモを使ってオートコンプリートの色を様々な色にしてみよう！

オートコンプリートで背景アカ

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #ffc7dd inset;
}

オートコンプリートで背景ムラサキ

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #d9c7ff inset;
}

オートコンプリートで背景ミドリ

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #aee2b1 inset;
}

オートコンプリートで背景無し（シロ）

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset;
}

これでサイトに合ったオートコンプリート時の背景色を実装できそうね。

背景色以外にも線の色とか文字の色とか色々変更しようと思ったけど、どうやら「input:-webkit-autofill」セレクタで操作できるのは背景色(box-shadow)だけみたいだ。
文字や線の色を変更するには、jsでinputのvalueを取得してアレコレする必要がありそうなので今回はここまでとします。

以上でオートコンプリートの背景色を変える方法を終わります！