:placeholder-shown

:placeholder-shownCSS疑似クラスは、プレイスホルダー文字列が表示されている <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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:placeholder-shown
実験的
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 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 51
完全対応 51
未対応 4 — 51
代替名
代替名 非標準の名前 :-moz-placeholder を使用しています。
Opera Android 完全対応 ありSafari iOS 完全対応 9Samsung Internet Android 完全対応 5.0
Support on non-type="text" elements (such as type="number" or type="time")
実験的
Chrome 完全対応 47Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 完全対応 34Safari 完全対応 9WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 59Opera Android 完全対応 34Safari iOS 完全対応 9Samsung Internet Android 完全対応 5.0

凡例

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

関連情報