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

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 以上と定義されています。

加えて、 Windows のハイコントラストモードでは、プレイスホルダーの文字列はユーザーが入力した文字列と同じスタイルで表示されます。これでは、一部の人々にとってどれが入力された文字列で、どれがプレイスホルダーの文字列なのかが分かりにくくなるでしょう。

仕様策定状況

仕様書 策定状況 コメント
CSS Pseudo-Elements Level 4
::placeholder の定義
草案 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

57

あり -webkit-

あり -webkit-

51

あり -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-

52

あり -moz-

37 -webkit-

10.3

4.3 -webkit-

7.0

あり -webkit-

関連情報

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

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