CSSでinput要素のプレースホルダーテキストをスタイリングする方法

HTMLの<input>要素のプレースホルダー(placeholder)テキストをCSSでカスタマイズするには、擬似要素(pseudo-element)をターゲットに指定する必要があります。これを実現するのが、CSSの擬似セレクターである::です。

通常のinput要素とプレースホルダーテキスト

まずは、プレースホルダー付きのシンプルなinput要素を見てみましょう。

<input type="text" placeholder="Hello there!">

ブラウザのデフォルトスタイルでは、プレースホルダーテキストは次のように表示されます。

CSSでプレースホルダーの色を変更する

それでは、::placeholderセレクターを使って、プレースホルダーのテキストを赤色に変更してみましょう。

input::placeholder {
    color: red;
}

実行結果は以下の通りです。

再利用できるプレースホルダークラスを作る

上記のコードのようにinput要素へ直接スタイルを指定すると、ページ内のすべてのinput要素に同じスタイルが適用されます。特定の要素だけにスタイルを当てたい場合は、クラスを使うと便利です。

.custom-input-placeholder::placeholder {
    color: red;
}

あとは、スタイルを適用したい任意のinput要素にこのクラスを追加するだけです。

<input class="custom-input-placeholder" type="text" placeholder="Hello there!">

知っておきたいポイント:擬似要素と擬似クラスの違い

擬似要素(pseudo-elements)と擬似クラス(pseudo-classes)は混同しやすいので注意しましょう。

• 擬似要素:DOMの一部を表します。
• 擬似クラス:ユーザーの操作に基づく要素の状態(state)を表します。例::focusや:activeなど。

構文上の違いは以下の通りです。

• 擬似要素は二重コロンで定義:::
• 擬似クラスは単一コロンで定義::