:placeholder-shown
は CSS の疑似クラスは、プレイスホルダー文字列が表示されている <input>
または <textarea>
要素を表します。
/* プレイスホルダーが有効な要素を選択 */
:placeholder-shown {
border: 2px solid silver;
}
構文
:placeholder-shown
例
基本的な例
HTML
<input placeholder="何か入力してください!">
CSS
input {
border: 2px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: silver;
}
結果
文字列があふれる場合
スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 text-overflow
プロパティでこの挙動を修正すると便利です。
HTML
<input placeholder="宜しければ、この入力欄に何か入力してください!">
CSS
input:placeholder-shown {
text-overflow: ellipsis;
}
結果
色付きのテキスト
HTML
<input placeholder="Type something here!">
CSS
input:placeholder-shown {
color: red;
font-style: italic;
}
結果
カスタマイズした入力欄
以下の例では部署名と ID コード欄をカスタムスタイルで強調します。
HTML
<form id="test">
<p>
<label for="name">Enter Student Name:</label>
<input id="name" placeholder="Student Name"/>
</p>
<p>
<label for="branch">Enter Student Branch:</label>
<input id="branch" placeholder="Student Branch"/>
</p>
<p>
<label for="sid">Enter Student ID:</label>
<input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
</p>
<input type="submit"/>
</form>
CSS
input {
background-color: #E8E8E8;
color: black;
}
input.studentid:placeholder-shown {
background-color: yellow;
color: red;
font-style: italic;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Selectors Level 4 :placeholder-shown の定義 |
草案 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
::placeholder
疑似要素はプレイスホルダー自身にスタイルを適用します。- 関連する HTML 要素:
<input>
,<textarea>
- HTML フォーム