CSSの:placeholder-shown疑似クラスでプレースホルダー表示中の入力フィールドのスタイルをカスタマイズする方法
プレースホルダー（placeholder）が表示されている入力フィールドのスタイルをカスタマイズしたい場合には、CSSの:placeholder-shown疑似クラスを使用します。
この疑似クラスは、placeholder属性が設定されており、かつユーザーがまだ何も入力していない状態の入力フィールドにマッチします。プレースホルダーが表示されている間だけ、枠線の色や背景色などを変更できるため、「まだ入力されていない」ことをユーザーに視覚的に伝えるのに非常に便利です。
例1：:placeholder-shownの基本的な使い方
以下の例では、:placeholder-shown疑似クラスを使って、プレースホルダーが表示されている入力フィールドの枠線の色を変更しています。さらに:nth-of-type()セレクタと組み合わせることで、偶数番目の要素に対して異なるスタイルを適用しています。
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: dodgerblue;
}
input:nth-of-type(even):placeholder-shown {
border-color: olivedrab;
}
</style>
</head>
<body>
<input type="text" placeholder="dodgerblue">
<input type="email" placeholder="olivedrab">
</body>
</html>出力結果
上記のコードを実行すると、次のような結果が表示されます。
例2：背景色との組み合わせ
次の例では、枠線の色に加えて背景色も変更しています。なお、:placeholder-shownはplaceholder属性を持つ要素にのみ適用されるため、placeholder属性が設定されていないテキスト入力やラジオボタンにはスタイルが適用されない点に注意してください。
<!DOCTYPE html>
<html>
<head>
<style>
input:placeholder-shown {
border-color: orange;
background: powderblue;
}
</style>
</head>
<body>
<input type="radio" checked>
<input type="email" placeholder="orange">
<input type="text">
</body>
</html>出力結果
上記のコードを実行すると、次のような結果が表示されます。
押さえておきたいポイント
- :placeholder-shownは、
placeholder属性が設定されていて、かつ値が空の状態の入力フィールドにのみマッチします。 - placeholder属性がないinput要素（チェックボックスやラジオボタンなど）には適用されません。
:nth-of-type()などの他のセレクタと組み合わせることで、柔軟なスタイリングが可能です。- Chrome、Firefox、Edge、Safariなど、主要なモダンブラウザで広くサポートされています。
-
CSSでテキストボックスのプレースホルダーの色を変更する方法
Webフォームの入力欄に表示されるプレースホルダー(仮置きテキスト)の色は、CSSの ::placeholder 疑似要素を使うことで自由に変更できます。デフォルトのグレー表示から、サイトのデザインに合わせた色へとカスタマイズすることで、フォームの見栄えやユーザビリティを向上させることができます。::placeholder疑似要素の基本構文::placeholder 疑似要素の書き方は以下のとおりです。::placeholder { 属性: 値; }例1:特定の入力欄だけプレースホルダーの色を変える次の例では、:last-child セレクタと組み合わせることで、2つ目のinput要素の
-
フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選
CSSには、フォームやテキスト入力に関連する便利でありながら、意外と知られていないプロパティがいくつか存在します。その代表例が caret-color、pointer-events、tab-size の3つです。 caret-color: テキスト入力時に点滅するキャレット(テキストカーソル)の色を自由に指定できます。 pointer-events: 要素へのマウス操作を無効化し、ユーザーがその要素をクリックしたり選択したりできないようにできます。 tab-size: タブ文字によって挿入される空白(ホワイトスペース)の幅を設定します。 以下に、これらのプロパティを使用した具体的なコード例