【CSS Modules】:placeholder-shown疑似クラスの使い方
:placeholder-shown疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:placeholder-shownオブジェクトは、input要素やtextarea要素において、プレースホルダーテキストが表示されている状態を表すオブジェクトです。このCSSの擬似クラスは、ユーザーがまだ値を入力していないため、要素に設定されたプレースホルダーテキストが視覚的に表示されているときに、その要素を選択し、特定のスタイルを適用するために使用されます。具体的には、フォームの入力フィールドが空の状態で、かつプレースホルダーの文字列が画面上に表示されている場合に、そのフィールドを対象としてスタイルを適用できます。
例えば、プレースホルダーが表示されている間だけ、入力欄の文字色をグレーから少し明るい色に変えたり、背景色を薄くすることで、ユーザーが入力すべきフィールドであることを視覚的に強調し、より直感的なインターフェースを提供することができます。この擬似クラスが適用されるのは、要素に値が設定されておらず、プレースホルダーが表示されている間だけです。ユーザーが文字を入力し始めたり、プログラムによって要素に値が設定されたりすると、プレースホルダーは表示されなくなるため、この擬似クラスによって適用されたスタイルは自動的に解除されます。これにより、フォームの入力状態に応じた動的な視覚的フィードバックを容易に実装し、フォームのユーザビリティを向上させることが可能です。
公式リファレンス: :placeholder-shown
構文(syntax)
1input:placeholder-shown { 2 opacity: 0.7; /* プレースホルダーが表示されている要素に適用されるスタイル */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません