いろいろ調べると、疑似クラス「:placeholder」と「:placeholder-shown」というのにいきつく。
ちょっとハマってしまったので備忘録。ハマった理由は3つ。
- Can I use をベースに実装したが、2017年7月22日時点では情報に誤りがあり、実際にはプリフィックスが必要だったり、対応中が対応していなかったりした
- 「:placeholder」と「:placeholder-shown」を共存させたら、どのタイミングかは調査していないが、適用されないケースが発覚した
- 記法に誤りがあった
これらを踏まえて、完成版。
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; }