CSSで、input要素や、textarea要素のplaceholderの色を変更する方法についてです。

placeholderとは？

「placeholder」はテキスト系のinput要素や、textareaに何も入力がない状態で、代わりに表示される、ガイド用のテキストです。ブラウザーのデフォルトスタイルでも、通常の入力テキストよりも薄い色で表示されているはずです。

placeholderの色の設定方法

スタイルシートでは、Placeholderに、下記のPsuedo（疑似）クラスが利用できます。

::placeholder{
  color:#ccc
}

実装例

CSSのplaceholder の実装例です。

See the Pen Placeholder by Joe (@akajoe) on CodePen.

ブラウザの対応状況

実際には、placeholderのCSSプロパティは、まだすべてのブラウザでサポートされていません。２０１７年現在、上記がより一般化するにはもうすこし時間がかかるでしょう。

2020年1月現在、placeholderのCSSプロパティは、IEを除く多くのメジャーなブラウザでサポートが完了しています。

• Can I use: placeholder pseudo element

ただし、EdgeやChromeの古いバージョンなど、完全にクロスブラウザ対応を行うには、各ブラウザのプリフィックスを使った対応が必要です。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#ccc;
}
::placeholder{ /* Others */
 color:#ccc
}

実際には、クロスブラウザ対応は、自身でプリフィックスを取り扱うよりは、ツールを用いたほうがよいでしょう。

例えば下記は、自動で各ブラウザの最新バージョンを踏まえたのプリフィックスを付与してくれます。

• Autoprefixer 

上記はオンラインですが、ローカル環境においても、様々なプリフィクスを管理する方法があります。

• Autoprefixerによる、CSS3の管理