We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS:placeholder-shown 疑似クラスは、プレイスホルダー文字列が表示されている <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;
}

結果

仕様書

仕様 ステータス コメント
Selectors Level 4
:placeholder-shown の定義
草案 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応47 なし1

51

4 — 512

なし349
Support on non-type="text" elements (such as type="number" or type="time") ? なし なし なし ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応51 ? なし1

51

4 — 512

なし9.2 ?
Support on non-type="text" elements (such as type="number" or type="time") ? ? ? なし なし ? ?

1. This feature is not implemented. See this enhancement request.

2. Supported as :-moz-placeholder.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,