現場のCSS地獄を救う：`:autofill` 疑似クラスとの付き合い方
フロントエンドの現場で、デザイナーから「ブラウザの自動入力で背景が黄色くなるのを消してくれ」と言われたことはないだろうか？
あれは、Chromeを中心としたブラウザが「ユーザーの利便性」のために親切心でやっていることだ。しかし、渾身のデザインで作り上げた洗練されたフォームが、突如として安っぽい薄黄色に染まるのは、我々エンジニアにとっては悪夢でしかない。
今日は、この `:autofill` 疑似クラスについて、ブラウザの裏側の挙動を含めて徹底的に深掘りしよう。
—
なぜブラウザは勝手に色を変えるのか？
結論から言うと、これはブラウザが「この入力フィールドは、ブラウザが保持しているパスワードや住所情報を自動で埋め込んだものですよ」とユーザーに視覚的に伝えているからだ。
しかし、この強制的なスタイル適用は、CSSの優先順位を無視する特異な挙動をする。我々が `background-color` を指定しても、ブラウザの内部的なデフォルトスタイルが上書きしてくるため、通常のCSSでは太刀打ちできないことがほとんどだ。
ここで登場するのが `:autofill`（かつての `:webkit-autofill`）だ。
—
現場で使える「最強の無効化」テクニック
`:autofill` は通常のプロパティを受け付けないことが多い。特に `background-color` を単体で指定しても無視される。ここで、CSSの「不透明度」と「影（box-shadow）」を組み合わせたハックを紹介しよう。
実践コード：自動入力の背景色を制御する
/ 自動入力された要素に対してのみ適用 /
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
/
1. background-colorを上書きしようとしても無視されることが多い。
2. そのため、box-shadowで内側に色を塗りつぶす手法が最も確実。
3. transition-delayを長く設定することで、ブラウザのスタイル適用を遅延させるのがコツ。
/
-webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
/ 文字色を維持したい場合は明示的に指定 /
-webkit-text-fill-color: #333 !important;
/ アニメーションの適用時間を長めにとることで、自動入力時のフラッシュを防ぐ /
transition: background-color 5000s ease-in-out 0s;
}
なぜ `box-shadow` を使うのか？
ブラウザの内部エンジンは、`:autofill` 状態の要素に対して `background-color` を無理やり書き換えることを許さない。しかし、`box-shadow` を使って「入力欄の内側に巨大な影を落とす」ことで、擬似的に背景色を塗りつぶすという、ある種のアクロバティックな手法が今のところ最も安定している。
—
現場でハマる「注意点」
1. `transition` の罠
`transition: background-color 5000s` という記述を見て「なぜ5000秒も？」と疑問に思うかもしれない。これは、ブラウザが自動入力時に適用するスタイルを、CSSのアニメーションによって強制的に無効化し続けるための「時間稼ぎ」だ。
2. ブラウザごとの差異
現在、`:autofill` は主要なブラウザでサポートされているが、WebKit系（Safari/Chrome）とFirefoxでは挙動が微妙に異なる。実務では、`-webkit-` プレフィックスを付けたものと、標準の `:autofill` を併記するのが安全策だ。
/ 標準仕様とWebKit系の両方をケアしておくのがプロのたしなみ /
input:autofill,
input:-webkit-autofill {
/ 共通の処理 /
}
—
アーキテクトからのアドバイス
「デザイン通りにならない」と嘆く前に、一度立ち止まって考えてみてほしい。ブラウザが自動入力機能を提供しているのは、ユーザーが何度も同じ住所やパスワードを入力する手間を省くためだ。
もしあなたが「背景色を消したい」という理由で、自動入力そのものを無効化（`autocomplete=”off”`）しようと考えているなら、それは少し待ってほしい。ユーザーにとっての利便性を損なわずに、見た目を整えることこそが我々フロントエンドエンジニアの矜持だ。
`:autofill` を使う際は、単に「消す」のではなく、自社のデザインシステムに合わせた色を `box-shadow` で当てるようにしよう。そうすれば、ユーザーの利便性とブランドの一貫性を両立できるはずだ。
現場からは以上だ。困ったことがあれば、またいつでも聞いてくれ。
コメント