catnose
catnose
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;
}
このようにフィールドごとにプレースホルダーの色を変えることができます。
プレースホルダー色は薄くしすぎないこと
プレースホルダー色を薄くしすぎると、アクセシビリティやユーザー体験が低下します。
ユーザーが見ているディスプレイは、開発者の私たちが見ているディスプレイより暗いかもしれません。もちろんユーザーの視力にも差があります。少し濃い目くらいのプレースホルダー色を選ぶのが良いでしょう。
