CSSを使用して入力プレースホルダーテキストのスタイルを設定する方法

HTML入力要素のプレースホルダーテキストをCSSでスタイル設定するには、疑似要素をターゲットにする必要があります。 属性。これは、CSS疑似セレクター::を使用して行います。 。

プレースホルダーテキストを含む通常の入力要素

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

デフォルトのブラウザスタイルでプレースホルダーテキストがどのように表示されるか：

CSS

それでは、CSS ::placeholderを使用しましょう。 入力要素のプレースホルダーテキストを赤にするセレクター：

input::placeholder {
    color: red;
}

結果：

再利用可能なプレースホルダーテキストクラス

すべての<input>のスタイルを設定したくない場合 要素のプレースホルダーテキストは、上記のコードと同じように（入力要素を直接ターゲットにすることで）、クラスを使用できます。

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

そして、それを必要な入力要素に追加します。

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

知っておきたい

疑似要素を混同しないでください 疑似クラス

• 疑似要素はDOMの一部を表します。
• 疑似クラスは状態を表します ユーザーの操作に基づく要素の評価。例：:focus 、または:active 。

構文の違い：

• 疑似要素は二重コロンで定義されます：::
• 疑似クラスは単一のコロンで定義されます: