CSS :placeholder-shown 擬似クラス
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
:placeholder-shown は CSS の擬似クラスで、<input> または <textarea> 要素のうち、現在プレイスホルダー文字列が表示されているものを表します。
試してみましょう
label {
display: block;
margin-top: 1em;
}
input:placeholder-shown {
background-color: ivory;
border: 2px solid darkorange;
border-radius: 5px;
}
<form>
<label for="name">名前:</label>
<input id="name" name="name" type="text" />
<label for="email">メールアドレス:</label>
<input id="email" name="email" type="email" placeholder="name@example.com" />
<label for="age">年齢:</label>
<input
id="age"
name="age"
type="number"
value="18"
placeholder="18 歳以上" />
</form>
構文
css
:placeholder-shown {
/* ... */
}
例
基本的な例
この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。
HTML
html
<input placeholder="何か入力してください！" />
CSS
css
input {
border: 1px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: teal;
color: purple;
font-style: italic;
}
結果
文字列があふれる場合
スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 text-overflow プロパティでこの挙動を修正すると便利です。
HTML
html
<input id="input1" placeholder="氏名、ランク、シリアル番号" /> <br /><br />
<input id="input2" placeholder="氏名、ランク、シリアル番号" />
CSS
css
#input2:placeholder-shown {
text-overflow: ellipsis;
}
結果
カスタマイズした入力欄
以下の例では部署名と ID コード欄をカスタムスタイルで強調します。
HTML
html
<form id="test">
<p>
<label for="name">生徒名を入力:</label>
<input id="name" placeholder="生徒名" />
</p>
<p>
<label for="branch">生徒の所属を入力:</label>
<input id="branch" placeholder="所属名" />
</p>
<p>
<label for="sid">生徒 ID を入力:</label>
<input
pattern="[0-9]{8}"
title="数字 8 桁の ID"
id="sid"
class="student-id"
placeholder="数字 8 桁の id" />
</p>
<input type="submit" />
</form>
CSS
css
input {
background-color: #e8e8e8;
color: black;
}
input.student-id:placeholder-shown {
background-color: yellow;
color: red;
font-style: italic;
}
結果
仕様書
| Specification |
|---|
| HTML # selector-placeholder-shown |
| Selectors Level 4 # placeholder-shown-pseudo |
ブラウザーの互換性
関連情報
::placeholder擬似要素はプレイスホルダー自身にスタイルを適用します。- 関連する HTML 要素:
<input>,<textarea> - HTML フォーム