ようこそ、フロントエンドの世界へ！
日々、コードと向き合っていると「なんでここだけ色が勝手に変わっちゃうの？」と、自分の思い通りにならない瞬間に出会うことがありますよね。でも安心してください。それはあなたが間違っているのではなく、ブラウザが「親切心」でやってくれていることなんです。
今日は、そんなブラウザの「おせっかい」を優しくコントロールして、あなたのデザインを完璧に仕上げる魔法の道具、`:autofill`（オートフィル）疑似クラスについてお話ししましょう。
—
1. そもそも「自動入力」ってなんだろう？
ネットショッピングで住所を入力するときや、SNSにログインするとき、メールアドレスの最初の1文字を打っただけで「ババッ！」と残りの文字が埋まった経験はありませんか？
あれがブラウザの自動入力（オートフィル）機能です。
例えるなら、なじみの定食屋さんに足を踏み入れた瞬間、店員さんが「いつものでいいよね！」と、あなたが注文する前に伝票をスラスラと書いてくれるようなもの。とっても便利ですよね。
でも、このときに一つだけ困ったことが起きます。
ブラウザは「ここは私が自動で入力しましたよ！」と分かりやすくするために、入力欄の色を勝手に薄い黄色や青色に変えてしまうのです。
せっかくあなたがオシャレなカフェのような、落ち着いたベージュや白のデザインを作っていても、そこだけパキッとした「ブラウザの色」になってしまう。これには、世界中のデザイナーやエンジニアが頭を悩ませてきました。
—
2. `:autofill` は「お着替え」の合図
そこで登場するのが、CSSの `:autofill` です。
これは、「ブラウザが自動入力した状態の入力欄」だけをピンポイントで捕まえて、「その色、ちょっと私のデザインに合わせて変えさせてね」とお願いするためのセレクタです。
以前はブラウザごとに書き方がバラバラで大変だったのですが、今は `:autofill` という標準的な名前で呼べるようになりました（※古いブラウザ向けに少し工夫は必要ですが、それは後ほどお伝えしますね）。
—
3. 【実践】自動入力の色を味方につけよう
では、実際にどう書くのか見てみましょう。
「自動入力されたとき、背景を白く保ちたい！」という時のコードです。
ここで一つ、現場の「泥臭い」けど大切なテクニックをお教えします。実は、自動入力の背景色はブラウザの力が強すぎて、普通の `background-color` だけでは上書きできないことが多いんです。
そこで、「内側の影（box-shadow）」を使って、背景色を塗りつぶすという裏技をよく使います。
/ 入力欄（input要素）への設定 /
input {
/ 普段のスタイル /
border: 2px solid #ccc;
padding: 10px;
border-radius: 4px;
transition: all 0.3s;
}
/
ここからが魔法！
ブラウザが「自動入力」をした瞬間に適用されるスタイル
/
input:-webkit-autofill,
input:autofill {
/
背景色を無理やり変えるのではなく、
太い内側の影（box-shadow）で「塗りつぶす」のがコツです。
0 0 0 1000px というのは、巨大な影で中を埋め尽くすという意味。
ここでは背景を「白（#ffffff）」に固定しています。
/
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
box-shadow: 0 0 0px 1000px #ffffff inset !important;
/ 文字の色も、自分のデザインに合わせて指定しましょう /
-webkit-text-fill-color: #333 !important;
}
/ 入力欄にフォーカスが当たった時の動きも忘れずに /
input:focus {
outline: none;
border-color: #007bff; / 青色のアクセント /
}
コードのポイント解説
- `!important` を使う理由: ブラウザが強制的に付けてくる色に勝つためには、ここでは例外的に「これが一番大事だよ！」という合図（!important）を添えてあげます。
- `inset` の影: 普通の影は外に出ますが、`inset` をつけると内側に広がります。これで「背景を塗りつぶした風」に見せているのです。
—
4. なぜこんなに複雑なの？（チーフアーキテクトの独り言）
「えっ、ただ背景色を変えたいだけなのに、影を使うなんて変なの！」
そう思ったあなた、大正解です。感覚が鋭いですね。
実はこれ、セキュリティやアクセシビリティ（使いやすさ）を守るためのブラウザ側の「ガード」なんです。「自動入力された」という事実はユーザーにとって重要な情報なので、サイト側が勝手に消し去って、ユーザーが「あれ？いつの間にパスワードが入ってるの？」と混乱しないように、ブラウザが色を死守しようとしている名残なんです。
でも、私たち制作者としては、ブランドの世界観も守りたい。
`:autofill` を使うときは、「便利さはそのままに、見た目だけをそっと整える」という、おもてなしの心で設定してあげてください。
—
5. つまずきやすいポイントへのフォロー
もし、コードを書いてもうまくいかない時は、以下の2点を確認してみてください。
1. ブラウザのキャッシュ: 自動入力の挙動は、一度ブラウザを閉じたり、入力内容をクリアしたりしないと正しく反映されないことがあります。
2. 古い書き方: まだまだ Google Chrome などのベースとなっている技術（WebKit）の影響で、`:-webkit-autofill` という「`-webkit-`」がついた書き方も一緒に書いておくと、より多くの環境で安定して動きますよ。
—
最後に
CSSを学び始めたばかりの頃は、こういう「ブラウザ独自の挙動」に振り回されて、「自分はセンスがないのかな……」なんて落ち込むこともあるかもしれません。
でも、大丈夫です。
今回のような「自動入力の色が変わっちゃう」問題に気づけたこと自体が、あなたが細部まで丁寧にサイトを作ろうとしている素晴らしい証拠です。
一つずつ、こうした「小さな違和感」を解決していくうちに、あなたはいつの間にか、誰よりもユーザーに優しい、そして美しいサイトを作れるようになっています。
また分からないことがあれば、いつでも聞きに来てくださいね。応援しています！
コメント