0から目指すWebマスター Web制作に関する備忘録
検索

CSS

inputのplaceholder(プレースホルダー)のテキスト色を変更する

いろいろ調べると、疑似クラス「:placeholder」と「:placeholder-shown」というのにいきつく。
ちょっとハマってしまったので備忘録。ハマった理由は3つ。

  1. Can I use をベースに実装したが、2017年7月22日時点では情報に誤りがあり、実際にはプリフィックスが必要だったり、対応中が対応していなかったりした
  2. 「:placeholder」と「:placeholder-shown」を共存させたら、どのタイミングかは調査していないが、適用されないケースが発覚した
  3. 記法に誤りがあった

これらを踏まえて、完成版。

placeholder(プレースホルダー)の色を変える

CSS
input:placeholder-shown {
color: #bbb;
}
input::-webkit-input-placeholder {
color: #bbb;
}
input::-moz-placeholder {
color: #bbb;
}
input:-ms-input-placeholder {
color: #bbb;
}
input::-ms-input-placeholder {
color: #bbb;
}

余談

ハマった理由の3つめ「記法に誤りがあった」ですが、下記の書き方では機能しませんでした。知識不足により理由は不明。

/* この記述だと反映されない...知識不足により理由は不明。 */
input:placeholder-shown,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder {
color: #bbb;
}