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

CSS::placeholder 疑似要素は、 form 要素のプレイスホルダー文字列を表します。

::placeholder {
  color: blue;
  font-size: 1.5em;
}

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

メモ: Firefox では、プレイスホルダー文字列の外見は既定で半透明の灰色です。

構文

::placeholder

赤い文字

HTML

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

CSS

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

結果

緑のテキスト

HTML

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

CSS

input::placeholder {
  color: green;
}

結果

アクセシビリティの考慮事項

色のコントラスト

コントラスト比

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

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

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

使用性

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

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

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

<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> 要素を解釈できなくなります。

仕様書

仕様書 状態 備考
CSS Pseudo-Elements Level 4
::placeholder の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 57
完全対応 57
完全対応 あり
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Edge 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Firefox 完全対応 51
完全対応 51
完全対応 19
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 あり
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Safari 完全対応 10.1
完全対応 10.1
完全対応 5
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
WebView Android 完全対応 57
完全対応 57
完全対応 2
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Chrome Android 完全対応 57
完全対応 57
完全対応 あり
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Firefox Android 完全対応 51
完全対応 51
完全対応 19
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 37
接頭辞付き
完全対応 37
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Safari iOS 完全対応 10.3
完全対応 10.3
完全対応 4.3
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 7.0
完全対応 7.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit-input- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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