::placeholder 👉 プレースホルダーの色を変更する

CSSの疑似要素::placeholderを使うと、<input><textarea>のプレースホルダーの色を変更することができます。

placeholderの色を変える

モダンブラウザにのみ対応する場合

::placeholder {
  color: orange;
}

👆ちなみにinput::placeholder, textarea::placeholder { color: ~ }と書いても同じです。

ベンダープレフィックス

以前は::-ms-input-placeholderというベンダープレフィックスが必要だったEdgeも79(2020年1月リリース)以降は、::placeholderを使うことができます。

IE11と古いEdgeにも対応する場合

::placeholder {
  color: orange;
}
/* 旧Edge対応 */
::-ms-input-placeholder {
  color: orange;
}
/* IE対応 */
:-ms-input-placeholder {
  color: orange;
}

👆IE対応の方はコロン(:)が1つなので注意しましょう。

特定のinputやtextareaのプレースホルダーだけ色を変える

上のようにCSSで::placeholder { ~ }と書くと、すべての<input><textarea>に対して適用されます。一部だけ色を変えたい場合は以下のように指定すればOKです。

/**
 * .ph-redというクラスを持つinput/textareaだけ
 * 例:<input type="text" class="ph-red">
 */
.ph-red::placeholder {
  color: red;
}
/**
 * .darkmode要素内のinput/textareaだけ
 * <div class="darkmode">
 *   <input type="text">
 * </div>
 */
.darkmode ::placeholder {
  color: red;
}

サンプル

例えば「ダークモード時はプレースホルダー色も変えたい」のようなシーンを考えてみます。

/* 👇デフォルトのプレースホルダー */
::placeholder {
  color: orange;
}
/* 👇.darkmode内のplaceholder */
.darkmode ::placeholder {
  color: skyblue;
}
/* ここから下はレイアウトの調整 */
input, textarea {
  margin: 5px 0;
  width: 100%;
}
.darkmode {
  background: #000;
  padding: 15px;
}
.darkmode input, .darkmode textarea {
  background: #333;
  color: #FFF;
}

このようにフィールドごとにプレースホルダーの色を変えることができます。

プレースホルダー色は薄くしすぎないこと

プレースホルダー色を薄くしすぎると、アクセシビリティやユーザー体験が低下します。
ユーザーが見ているディスプレイは、開発者の私たちが見ているディスプレイより暗いかもしれません。もちろんユーザーの視力にも差があります。少し濃い目くらいのプレースホルダー色を選ぶのが良いでしょう。

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    57〜
  • Safariのアイコン
    Safari
    10.1〜
  • Firefoxのアイコン
    Firefox
    19〜
  • Edgeのアイコン
    Edge
    79〜
  • IEのアイコン
    IE
    未対応

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    79〜
  • iOS Safariのアイコン
    iOS Safari
    10.3〜

::placeholderの対応状況です。IEの色も変えるためには:-ms-input-placeholderを指定する必要があります

caniuse.comで詳しく見る