:placeholder-shown
:placeholder-shown は CSS の擬似クラスで、プレイスホルダー文字列が表示されている <input> または <textarea> 要素を表します。
css
/* プレイスホルダーが有効な要素を選択 */ :placeholder-shown { border: 2px solid silver; }
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 47 | 79 | 51 | 9 | 47 | 9 | |
non text types 非`type="text"`要素(`type="number"`や`type="time"`など)のサポート | 47 | 79 | 59 | 9 | 47 | 9 |
注釈 2件
削除済み
- このバージョンで機能が削除されました (51)
対応条件
- 以前は別名で対応していました: :-moz-placeholder (4)
基本構文
CSS
input:placeholder-shown + label {
transform: translateY(0);
opacity: 0.5;
}
input:not(:placeholder-shown) + label {
transform: translateY(-20px);
font-size: 0.75rem;
}ライブデモ
実務での使いどころ
-
フローティングラベルの実装
ユーザーが入力を開始するとラベルが上方に移動するフローティングラベルパターンをCSS単体で実現します。
注意点
- placeholder属性が空または未設定の場合、:placeholder-shownは一致しません。この擬似クラスを使う場合はplaceholder属性の設定が必須です。
アクセシビリティ
- フローティングラベルの実装時は、ラベルのフォントサイズが小さくなりすぎないよう、読みやすさを維持してください。