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

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

結果

アクセシビリティへの配慮

色のコントラスト

コントラスト比

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

重要なことは、プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができために十分であることです。

色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (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 の定義
草案 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

57

あり -webkit-

あり -webkit-

51

19 -moz-

10 -ms-

44

あり -webkit-

10.1

5 -webkit-

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

57

2.1 -webkit-

57

あり -webkit-

あり -webkit-

51

19 -moz-

37 -webkit-

10.3

4.3 -webkit-

7.0

あり -webkit-

関連情報

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

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