inputのプレースホルダー（placeholder）の色を変更する

CSSを使ってHTMLのinput要素のプレースホルダー（placeholder）テキストの色を変更する方法を解説します。主要ブラウザで互換性を保つためのスタイル記述を含みます。

実装例：プレースホルダーの色指定（クロスブラウザ対応）

::placeholder { /* Chrome、Firefox、Opera、Safari 10.1以降 */
  color: red;
  opacity: 1; /* Firefox用の透明度調整 */
}

:-ms-input-placeholder { /* Internet Explorer 10〜11用 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge用 */
  color: red;
}

コード解説

プレースホルダーはユーザーが入力を開始する前に入力フィールド内に表示されるヒントテキストです。スタイルのデフォルトはブラウザによって異なるため、デザインの統一やアクセシビリティを考慮すると、CSSでのカスタマイズが重要です。

標準仕様では::placeholder疑似要素を使いますが、Microsoft系ブラウザでは独自の疑似要素（:-ms-input-placeholder、::-ms-input-placeholder）を使わないと色変更が反映されません。

また、Firefoxはプレースホルダーのテキストを少し薄く表示するため、opacityを1に設定することで見た目を標準化しています。

注意点・補足

::placeholderはIE10-11非対応のため、必ず:-ms-input-placeholderも記述する

色の指定はcolorプロパティのみで、他のテキスト装飾も適用可能

JavaScriptなどで動的にプレースホルダーを変更した場合、スタイルは継続適用される

透明度を変更しないとFirefoxで薄く表示されることがある

Web制作現場でよくある質問（FAQ）

Q1: プレースホルダーの色はなぜ変えたいの？

A1: デザイン上の理由やアクセシビリティ向上のため、視認性を良くするために変更します。

Q2: なぜ複数の疑似要素を使うの？

A2: 各ブラウザの実装が異なるため、対応ブラウザごとに異なる疑似要素が必要です。

Q3: opacityはなぜ必要？

A3: Firefoxではプレースホルダーの透明度がデフォルトで低く設定されているため、opacity: 1で見た目を調整します。

まとめ

• 近年のブラウザでは::placeholderが標準的に対応
• 古いIE/Edge向けのベンダープレフィックスも忘れずに指定
• 見た目を均一に保つために透明度（opacity）の指定も推奨