:placeholder-shownは、フォーム入力要素においてプレースホルダーが表示されている状態を対象とする擬似クラスです。 この擬似クラスを使うことで、ユーザーが入力を行う前の状態（プレースホルダーが表示されているとき）に特定のスタイルを適用することができます。
:placeholder-shownの値とその効果の一覧
:placeholder-shown: プレースホルダーが表示されている場合に適用されるスタイルを定義します。
注意点と関連情報
:placeholder-shownはinputやtextarea要素に対して使用できます。
プレースホルダーが表示されていない場合、つまりユーザーが入力を開始すると、この擬似クラスのスタイルは適用されなくなります。
一部のブラウザではサポートされていない場合があるため、ブラウザ互換性を確認することが重要です。
:placeholder-shownが効かない理由として考えられること
対象の要素にplaceholder属性が設定されていない
:placeholder-shownは、placeholder属性が設定されているフォーム要素（<input>や<textarea>）にのみ適用されます。placeholder属性がない要素にはこの擬似クラスは機能しません。
対策：対象のフォーム要素にplaceholder属性が正しく設定されていることを確認します。例: <input type="text" placeholder="ここに入力">のように指定します。
フォーム要素にユーザーがすでに入力している
:placeholder-shownは、ユーザーが何も入力していない状態でのみ適用されます。入力が行われた場合、placeholderが非表示になり、この擬似クラスは適用されなくなります。
対策：フォームに値が入力されていない状態で確認し、placeholderが表示されているときにスタイルが反映されるかをテストします。
表示例
CSS:placeholder-shown
この例では、プレースホルダーが表示されている間、入力フィールドのボーダーが青く、背景色が淡い水色に変わります。また、プレースホルダーのテキストが赤色で表示されます。ユーザーが入力を開始すると、これらのスタイルは適用されなくなります。
HTMLコード
<div class="css-sample-container">
<input type="text" class="css-sample-input css-sample-placeholder-shown" placeholder="例: ここに入力">
</div>
CSSコード
.css-sample-placeholder-shown::placeholder {
color: red;
}
.css-sample-placeholder-shown:placeholder-shown {
border-color: blue;
background-color: #e0f7fa;
}
表示結果
まとめ
- :placeholder-shownは、入力要素がまだ空でプレースホルダーが表示されている状態をスタイル指定できる。
- ユーザーが入力を開始すると、:placeholder-shownのスタイルは適用されなくなる。
- ブラウザ互換性を確認し、意図通りの表示ができるか確認することが重要。