CSSでChromeのinput要素のオートフィル時に黄色い背景色になる問題を解決

すごい細かいことで、気づいていない方もいるかもしれませんが、僕は気になったので解決方法を紹介します。本当に細かい部分まで配慮できるWeb制作者こそ素晴らしいと思います。

Chromeにおける問題

こんな感じで <input> 要素を配置します。そして、ダブルクリックしてみると、黄色い背景色とともに候補が表示されます。ここに表示される候補は、他サイトで入力した際のものも表示されます。どのような場合に候補に表示されるかというと、name 属性が他サイトなどと同じだったら候補として表示されます。場合によっては、ダブルクリックしなくても初期状態で、<input> 要素に値が入力され、背景色が黄色になっていることもあります。

この黄色い背景色がダサいですよね。ページの配色とマッチしないときなどは最悪です。これをなくしていきたいと思います。

box-shadowで隠す

input:-webkit-autofill
{
  /* 色はinput要素の背景色（ここでは#fff）にそろえる */
  box-shadow: 0 0 0px 999px #fff inset;
}

古くからある手法で、色々なWebサイトで紹介されていると思います。内向きの box-shadow で隠してしまうということですね。しかし、この手法には弱点があります。

弱点

input 
{
  background-color: red;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}
input:focus 
{
  background-color: blue;
}
input:-webkit-autofill
{
  box-shadow: 0 0 0px 1000px blue inset;
}

このようにフォーカスしたときに背景色を赤色から青色に transition で変えたいときなど、transition プロパティを使用するときは注意が必要です。このままだと、<input> 要素をダブルクリックして候補を表示し、その候補にマウスカーソルを持って行ったり、候補からマウスカーソルを外したりすると、transition の .3s の分、一瞬ですが黄色い背景色がチラつくのです。この方法では黄色い背景色は消しているわけではなく、ただ box-shadow で上にかぶせて見えないようにしているだけです。なので、このような問題が起きます。

また、box-shadow で色を毎回指定する必要があり、汎用性に欠けます。

transition-duration

input 
{
  background-color: red;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}
input:focus 
{
  color: pink;
  border-color: green;
  background-color: blue;
}
input:-webkit-autofill 
{
  /* ここで指定しているbackground-colorは黄色い背景色のことです */
  -webkit-transition: background-color 9999s;
  transition: background-color 9999s;
}

duration を 9999s など非常に長い時間にしてしまうことで、回避することができます。この手法なら :-webkit-autofill の部分はその都度変更する必要はなく transiton も好きなように使えます。汎用性が非常に高いのでオススメです。