::placeholder

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

::placeholderCSS擬似要素で、 <input> または <textarea> 要素のプレイスホルダーテキストを表します。

試してみましょう

セレクターに ::placeholder を使ったルールを使用できるのは、 ::first-line 擬似要素が適用できる CSS プロパティだけです。

メモ: 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。

構文

css
::placeholder {
  /* ... */
}

アクセシビリティの考慮

色のコントラスト

コントラスト比

プレイスホルダー文字列はふつう、どのような入力が正しいかという例を示すものであり、実際の入力ではないことを示すために、薄い色になっています。

プレイスホルダー文字列と入力欄の背景色のコントラスト比について確認すべき重要なことは、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分で、プレイスホルダー文字列が入力された文字列だと誤認されないようになっていることです。

色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

ユーザビリティ

コントラストが十分に高いプレイスホルダー文字列とは、すでに入力された文字列と誤解される可能性があるものです。またプレイスホルダー文字列とは、人間が <input> 要素の中にコンテンツを入力すると、消滅するものでもあります。いずれにしろ、特に認知機能に障害を持つ人にとっては、フォームの入力を完了させるときに、困難を伴う可能性があります。

プレイスホルダーの情報を提供する他の方法としては、入力欄の外側で視覚的に近いところに表示し、 aria-describedby を使用して <input> とヒントをプログラム的に関連付ける方法もあります。

この実装方法では、情報が入力欄に入力されてもヒントを見ることができ、なおかつページが読み込まれたときに既に文字列が入力されているように見えることがありません。多くの読み上げ技術は aria-describedby を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。

html
<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

Windows 高コントラストモード

プレイスホルダー文字列は、Windows 高コントラストモードでは、ユーザーが入力した文字列と同じスタイルで表示されます。人によってはこれにより、中身が入力された文字列なのか、それとも中身がプレイスホルダー文字列なのかを見分けることが困難になります。

ラベル

プレイスホルダーは <label> 要素の置き換えではありません。 for および id 属性の組み合わせを使用し、入力欄とプログラム的に関連付けが行われていないラベルでは、読み上げソフトのような支援技術が <input> 要素を解釈できなくなります。

プレイスホルダーの外見の変更

この例では、プレースホルダーテキストのスタイルに加えることができる調整項目を紹介します。

HTML

html
<input placeholder="こちらに入力..." />

CSS

css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

結果

不透明なテキスト

Firefox など一部のブラウザーでは、プレースホルダーの既定の opacity を 100% 未満に設定しています。もし、プレースホルダーのテキストを完全に不透明化したい場合は、 opacity1 を設定してください。

HTML

html
<input placeholder="既定の透明度..." />
<input placeholder="完全に不透明..." class="force-opaque" />

CSS

css
::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}

結果

仕様書

Specification
CSS Pseudo-Elements Module Level 4
# placeholder-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::placeholder

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報