開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

CSS:input要素のplaceholderの色を変更する方法

最終更新:2017-08-17 by Joe

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

placeholderとは?

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

placeholderの色の設定方法

Placeholderには、下記のPsuedo(疑似)クラスが利用できます。

実装例

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

ブラウザの対応

実際には、上記のCSSプロパティは、まだすべてのブラウザでサポートされていません。

2017年現在、上記がより一般化するにはもうすこし時間がかかるでしょう。クロスブラウザの完全な対応を行うには、各ブラウザのプリフィックスを使った対応が必要です。

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

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

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