【CSS Modules】::placeholder疑似要素の使い方
::placeholder疑似要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
::placeholderオブジェクトは、ユーザー入力要素（<input>や<textarea>など）に表示されるプレースホルダーテキストを表すオブジェクトです。これはCSSの擬似要素の一つであり、HTMLフォームの入力フィールドにユーザーがまだ何も入力していない状態のときに、入力例やヒントとして表示されるテキストのスタイルをカスタマイズするために使用されます。
この擬似要素を用いることで、プレースホルダーテキストの色、フォントサイズ、フォントスタイル、文字間隔など、テキストの見た目に関連するさまざまなCSSプロパティを適用できます。例えば、ウェブサイトのデザインに合わせてプレースホルダーテキストの色を調整したり、特定のフォントで表示させたりすることが可能です。これにより、ウェブサイト全体の統一感を保ちながら、フォームの視認性やユーザー体験を向上させることができます。
ただし、::placeholder擬似要素に適用できるCSSプロパティは、主にテキストの見た目に関するものに限定されます。例えば、背景色やボックスモデル（幅、高さ、余白など）に関連するプロパティは通常適用されません。また、ユーザーが入力フィールドに文字を入力し始めると、プレースホルダーテキストは自動的に非表示になり、それに伴い::placeholderで指定されたスタイルも適用されなくなります。この機能は、ユーザーに分かりやすいヒントを提供するための補助的な役割を果たすものであり、フォームのユーザビリティを高める上で非常に有用です。
公式リファレンス: ::placeholder
構文(syntax)
1input::placeholder { 2 color: #a0a0a0; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません