パソ君
・input要素の補完機能を使うと、背景色が変わってしまう。。対策ある？
こんな疑問にお答えします。
input要素をクリックすると補完候補がでてきますよね。
それを選択すると、背景色が変わって反映されてしまう。。
実はこれ対策可能です。
ジト
すぐにできるよ！
ということで、この記事では「input要素の補完機能で背景色が変わる」について解説していきます！
この記事でわかること
input要素の補完機能で背景色が変わるときの対策
目次
【解決】input要素の補完機能で背景色が変わる【CSS】
そんな補完機能時の背景色が変わる対策がこちら↓
- 補完機能をオフにする
- box-shadowを使う
- transitonを使う
順に解説してきます。
そもそもの補完機能をオフにすれば、補完しなくなるため背景色が変わるのを防ぐことができます。
やり方は「autocomplete」の値をoffにすること。
<input type="text" name="name" autocomplete="off">とはいえ、補完機能を使いつつ、背景色を変えたくないかと。。そんな方は➁、➂つ目の方法をどうぞ。
２つ目の方法がbox-shadowを使うことです。
というのもbackgroundに対して指定しても、上書きができないため。。
そこでbox-shadowを用いて、背景色を重ねるように反映させます。
:-webkit-autofill擬似クラスを使えば、自動補完された状態の時のCSSを実装することができます。
input:-webkit-autofill {
box-shadow: 0 0 0px 1000px #fff inset;
}例として「#fff」を指定しました。
ここはデザインカンプに合わせて色を指定しましょう。
３つ目の方法が「transiton」を使うことですね。
input:-webkit-autofill {
transition: background-color 10000s ease-in-out 0s;
}上記をすることで背景色の変化を対策できます。
（１万秒後に背景色が変わるかと思われますが。。）
個人的には２つ目のbox-shadowを用いて対策する方法が良いと思われます！
他にもinputタグに関する記事があるので、参考に
【解説】input要素クリック時の枠線の色を変える方法【CSS】 
【解説】placeholder（プレースホルダー）の色をCSSで変える方法【サンプル付き】 【解決】input要素の補完機能で背景色が変わる【CSS】：まとめ
- 補完機能で背景色が変わってしまう
- 対策➀：補完機能をオフにする
- 対策➁：box-shadowを利用する
- 対策➂：transitionを利用する
ジト
補完機能後の背景色を変えたくない時はためしてみてね！
