::placeholder

試してみましょう

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

<label for="first-name">電話番号:</label><br />

<input
  id="first-name"
  type="tel"
  name="phone"
  minlength="9"
  maxlength="9"
  placeholder="9 桁の数値で" />

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

構文

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

アクセシビリティ

色のコントラスト

コントラスト比

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

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

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

• WebAIM: Color Contrast Checker
• MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

ユーザビリティ

コントラストが十分に高いプレイスホルダー文字列とは、すでに入力された文字列と誤解される可能性があるものです。またプレイスホルダー文字列とは、人間が <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" />

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Windows 高コントラストモード

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

ラベル

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

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

例

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

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

HTML

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

CSS

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

結果

不透明なテキスト

一部のブラウザーではプレースホルダーテキストの不透明度が低下します。完全に不透明なテキストが必要な場合は、color プロパティの値を明示的に設定してください。対応する入力要素と同じ色にするには、currentColor 値を使用することができます。

HTML

<input placeholder="ブラウザーが設定した色" />
<input placeholder="入力欄と同じ色" class="explicit-color" />
<input placeholder="半透明のテキスト色" class="opacity-change" />

CSS

input {
  font-weight: bold;
  color: green;
}

.explicit-color::placeholder {
  /* 入力要素と同じ色を使用し、ブラウザーでデフォルト色を設定するのを避ける */
  color: currentColor;
}

.opacity-change::placeholder {
  /* 半透明のテキスト */
  color: color-mix(in srgb, currentColor 70%, transparent);
}

結果

仕様書

ブラウザーの互換性

関連情報

• :placeholder-shown 擬似クラスは、アクティブなプレイスホルダーを持つ要素にスタイルを適用できます。
• 関連する HTML 要素: <input>, <textarea>
• HTML フォーム