フロントエンドの現場で「おっ、これキレイに書けてるね」と後輩のコードを見て思わず唸らされる瞬間、それは大抵、CSSの細かい仕様や「痒い所に手が届く疑似クラス」を正しく使いこなしている時だ。
フォームのUI実装で、プレースホルダー（入力ヒント）が出ているかどうかでスタイルを変えたい、あるいは「何か文字が入力されるまで送信ボタンやラベルの見た目をコントロールしたい」と思ったことはないだろうか？
昔なら、JavaScriptの`input`イベントを監視して、`value`の長さを泥臭くチェックしてクラスを付け外ししていたはずだ。だが、今のモダンCSSには `:placeholder-shown` という強力な相棒がいる。こいつを使いこなせば、JSを1行も書かずに、ピュアなCSSだけで入力状態のスタイリングを完全にコントロールできる。
今回は、この `:placeholder-shown` の実務的なポテンシャルと、現場でスグに使える実践知を余すところなく伝授しよう。
—
1. `:placeholder-shown` とは何か？（標準仕様とブラウザの裏側）
まず大前提として、多くのエンジニアがここで誤解するポイントを訂正しておこう。
`:placeholder-shown` は、「プレースホルダーの文字そのもの」を選択する疑似クラスではない。
選択するのは、あくまで「現在、プレースホルダーが表示されている状態の `` や `