CSSでオートフィル入力フィールドの黄色い背景色を削除する方法

一部のブラウザでは、ウェブサイトの入力フィールドにオートフィル（自動入力）が適用されると、なんとも言えない黄色い背景色が勝手に表示されることがあります。なぜそのような仕様になっているのかは謎ですが、この厄介な黄色を簡単に消す方法はお伝えできます。

まずは、オートフィルによって黄色く染まってしまった入力フィールドの見た目をご覧ください。

なぜこれが「問題」なのか？

もしサイトのカラーパレットが、この鼻水のような黄色と偶然マッチしているのであれば、問題ではないかもしれません。しかし、ほとんどの場合、この強制的な背景色はデザインの一貫性を損ない、ページ全体の印象を台無しにしてしまいます。

これはWebkit系ブラウザ特有の現象

ちなみに、この黄色い背景色の問題はWebkit系ブラウザ（Chrome、Safariなど多くのブラウザ）特有のものです。Firefoxの場合は白色の背景色が適用されるため、そこまで違和感はありません。

CSSで解決する方法

以下のCSSコードを使えば、Webkit系ブラウザにおけるオートフィル入力フィールドの背景色を白に変更できます。

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

ポイントは、-webkit-box-shadow の inset（内側の影）を巨大な値で指定することで、擬似的に背景色を上書きしている点です。Webkitではオートフィル時の背景色を直接上書きできないため、このテクニックが定番となっています。

まとめ

わずか数行のCSSで、あの不快な黄色い背景を排除できました。これでフォーム周りのデザインがより洗練され、サイト全体の見栄えもぐっと向上するはずです。オートフィルのスタイルに悩んでいた方は、ぜひ試してみてください。