CSSでフォームのプレースホルダーの文字色を変更する方法

CSSでフォームのプレースホルダーの文字色を変更する方法

CSSでフォームのプレースホルダーの文字色を変更する方法

フォームの入力欄に表示されているプレースホルダーの色をCSSで変更する方法をご紹介いたします。

CSSでフォームのプレースホルダーの色を変更する方法

何も指定していない場合は、以下のように少し薄めの色でプレースホルダーが表示されますね。「メールアドレス」と「パスワード」の文字がプレースホルダーです。

通常のプレースホルダー

このプレースホルダーの文字色を変更するには、以下のようなスタイルを指定してあげます。今回は色が変わったのを認識しやすいように、赤色を指定しています。

input::placeholder {
  color: #ff0000;
}
input:-ms-input-placeholder { /* IE用 */
  color: #ff0000;
}

このようにスタイルを指定することで、プレースホルダーの色を任意で変更できます。

プレースホルダーの文字色変更

「:-ms-input-placeholder」の方はIE対応用の指定なのですが、「::placeholder」とまとめて指定するとスタイルが効かなくなってしまうのでご注意ください。

/* ダメな例 */
input::placeholder,
input:-ms-input-placeholder {
  color: #ff0000;
}

なお、文字色だけでなく、「font-size」や「font-style」等も指定可能です。

input::placeholder {
  color: #ff0000;
  font-size: 12px;
  font-style: italic;
}
input:-ms-input-placeholder { /* IE用 */
  color: #ff0000;
  font-size: 12px;
  font-style: italic;
}

あとがき

プレースホルダーの色にもこだわりたい時は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です