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

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;
}

結果

カスタマイズした入力欄

以下の例では部署名と 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 の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 47Edge 未対応 なし
補足
未対応 なし
補足
補足 This feature is not implemented. See this enhancement request.
Firefox 完全対応 51
完全対応 51
未対応 4 — 51
代替名
代替名 非標準の名前 :-moz-placeholder を使用しています。
IE 完全対応 10
代替名
完全対応 10
代替名
代替名 非標準の名前 :-ms-input-placeholder を使用しています。
Opera 完全対応 34Safari 完全対応 9WebView Android 完全対応 51Chrome Android ? Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 This feature is not implemented. See this enhancement request.
Firefox Android 完全対応 51
完全対応 51
未対応 4 — 51
代替名
代替名 非標準の名前 :-moz-placeholder を使用しています。
Opera Android ? Safari iOS 完全対応 9.2Samsung Internet Android ?
Support on non-type="text" elements (such as type="number" or type="time")
実験的
Chrome ? Edge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera ? Safari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

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

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