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;
}