--- title: ':placeholder-shown' slug: 'Web/CSS/:placeholder-shown' tags: - CSS - Experimental - Reference - セレクター - 疑似クラス translation_of: 'Web/CSS/:placeholder-shown' ---
{{CSSRef}}

:placeholder-shown は CSS の疑似クラスは、プレイスホルダー文字列が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。

/* プレイスホルダーが有効な要素を選択 */
:placeholder-shown {
  border: 2px solid silver;
}

構文

{{CSSSyntax}}

例

基本的な例

HTML

<input placeholder="何か入力してください！">

CSS

input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}

結果

{{EmbedLiveSample("Basic_example", 200, 60)}}

文字列があふれる場合

スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。

HTML

<input placeholder="宜しければ、この入力欄に何か入力してください！">

CSS

input:placeholder-shown {
  text-overflow: ellipsis;
}

結果

{{EmbedLiveSample("Overflowing_text", 200, 60)}}

色付きのテキスト

HTML

<input placeholder="Type something here!">

CSS

input:placeholder-shown {
  color: red;
  font-style: italic;
}

結果

{{EmbedLiveSample("Colored_text", 200, 60)}}

カスタマイズした入力欄

以下の例では部署名と 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;
}

結果

{{EmbedLiveSample("Customized_input_field", 200, 180)}}

仕様書

仕様書 状態 備考
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}} {{Spec2("CSS4 Selectors")}} 初回定義

ブラウザーの対応

{{Compat("css.selectors.placeholder-shown")}}

関連情報