Google Chromeでinput要素の補完機能を使うと背景に色がついてしまう問題

Google Chromeでinput要素をクリックすると、補完候補が表示されます。
そしてこれをクリックすると、背景色がついた状態で候補が入力されます（Google Chromeのバージョンによるのか分かりませんが、「白色」だったり「青色」「黄色」のときなど背景色は様々です）。

白色の場合はまだ気になりませんが、「青色」や「黄色」だと気になります。

発生条件

これはGoogle Chromeに限らずですが、ブラウザでは<input>のname属性と入力した情報（value属性）を保存しているようです。

そして、他サイトも含めて、同じname属性の<input>をクリックしてフォーカスしたときに候補が表示されます。

この候補をクリックして入力した情報にはCSSの疑似クラスの:autofillがつきます。
そしてGoogle Chromeでは、この:autofill（:-webkit-autofill）にデフォルトで背景色が設定されているため、背景色がついてしまいます。

developer.mozilla.org

:autofill - CSS: カスケーディングスタイルシート | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/:autofill

:autofill は CSS の擬似クラスで、 要素の値がブラウザーによって自動補完された時に一致します。このクラスはユーザーがフィールドを編集すると一致しなくなります。

解決策

普通にbackground-colorで上書きすることもできなかったため、少しトリッキーなやり方で対応します。

box-shadowでインナーシャドウを付けて上書きする

box-shadowで白色のインナーシャドウをつけて無理矢理背景色を上書きして対応します。

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

transitionで変化しないようにする

transitionを使って、補完後も色が変わらないようにしています。

input:-webkit-autofill {
  transition: background-color 10000s ease-in-out 0s;
}

そもそも補完されないようにする

autocompleteでoffを指定すると、そもそも候補一覧が表示されなくなって、補完されなくなります。

<input type="text" name="name" autocomplete="off">

見た目の問題を解決するために、補完が使えなくなって利便性が損なわれるので対応としてはイマイチですが、1つの方法として紹介しておきます。