# Google Chromeでinput要素の補完機能を使うと背景に色がついてしまう問題
URL: https://webrandum.net/google-chrome-input-autofill-background-color/
公開日: 2022-02-14
更新日: 2022-02-14
カテゴリー: コーディング
出典: Webrandum（著者: サイトウ マサカズ）
## この記事の要約
- [:autofill – CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:autofill)
- [chrome のフォーム自動入力で背景色が黄色なのを変更 | Remember The Time](https://www.remember-the-time.xyz/2015/09/removing-input-background-colour-for.html)
Google Chromeでinput要素をクリックすると、補完候補が表示されます。
そしてこれをクリックすると、背景色がついた状態で候補が入力されます（Google Chromeのバージョンによるのか分かりませんが、「白色」だったり「青色」「黄色」のときなど背景色は様々です）。
白色の場合はまだ気になりませんが、「青色」や「黄色」だと気になります。
## 発生条件
これはGoogle Chromeに限らずですが、ブラウザでは``のname属性と入力した情報（value属性）を保存しているようです。
そして、他サイトも含めて、同じname属性の``をクリックしてフォーカスしたときに候補が表示されます。
この候補をクリックして入力した情報にはCSSの疑似クラスの`:autofill`がつきます。
そしてGoogle Chromeでは、この`:autofill（:-webkit-autofill）`にデフォルトで背景色が設定されているため、背景色がついてしまいます。
[developer.mozilla.org:autofill - CSS: カスケーディングスタイルシート | MDNhttps://developer.mozilla.org/ja/docs/Web/CSS/:autofill:autofill は CSS の擬似クラスで、 要素の値がブラウザーによって自動補完された時に一致します。このクラスはユーザーがフィールドを編集すると一致しなくなります。](https://developer.mozilla.org/ja/docs/Web/CSS/:autofill)
## 解決策
普通に`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`を指定すると、そもそも候補一覧が表示されなくなって、補完されなくなります。
```
```
見た目の問題を解決するために、補完が使えなくなって利便性が損なわれるので対応としてはイマイチですが、1つの方法として紹介しておきます。