::placeholder疑似要素

::placeholder疑似要素は、
HTMLのplaceholder属性が指定されたテキスト入力コントロール要素において、プレースホルダーテキストにスタイルを適用するためのセレクタです。

::placeholder疑似要素を使用することで、プレースホルダーテキストの色、フォント、サイズ、太さ、横位置の整列などをスタイリングできます。

HTMLのテキスト入力コントロール要素にplaceholder属性を使用すると、入力フィールドが空のときに、ユーザーがどのような値を入力すべきかを示す視覚的なヒントをテキストで提供できます。
このテキストは「プレースホルダーテキスト」と呼ばれます。

基本的な例

HTML 
<input type="text" placeholder="placeholder text">
CSS 
input::placeholder {
    color: blue;
    font-size: 1.2em;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}
実際に適用された様子

覚えておきましょう!
プレースホルダーテキストのデフォルトの色は、ほとんどのブラウザで薄いグレーに設定されています。

::placeholder 疑似要素は、プレースホルダーテキストが表示されている間にのみスタイリングが適用されます。上記の例では、プレースホルダーテキストが横方向に中央揃えになっていることも確認できます。
テキストが入力されると、::placeholder 疑似要素は適用されなくなります。

::placeholder疑似要素の書式は次のとおりです。

構文

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

::placeholder疑似要素がサポートするスタイルプロパティ

注意してください！
以下のサポートするスタイルプロパティは完全ではありません。ブラウザごとにサポートするスタイルプロパティが異なる場合があります。これはブラウザごとのポリシーによって変わることを意味し、仕様書にはサポートするスタイルプロパティが明記されていません。

  • font関連のプロパティ
  • color
  • background関連のプロパティ
  • text-align
  • word-spacing
  • letter-spacing
  • opacity
  • ...

opacity調整：Firefoxブラウザ

一部のブラウザ（特にFirefox）では、プレースホルダーテキストのopacityの値が1未満に設定されています。完全に不透明にするには、opacityの値を1に設定すればよいです。

CSS 
::placeholder {
    opacity: 1;
}
実際に適用された様子

ブラウザ互換性

::placeholder擬似要素のブラウザー対応状況
セレクタ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
::placeholder 57 79 51 10.1

仕様書

::placeholder擬似要素の仕様書
仕様書
::placeholder CSS Pseudo-Elements Module Level 4
#placeholder-pseudo

参考資料