CSS: プレースホルダー(placeholder)の色を変更する
テキストボックスの入力ヒントを示すプレースホルダー(placeholder) の色を変更したい場合は、 疑似要素「::placeholder」を使用します。 デフォルトでは薄いグレーですが、好きな色に変更できます。
次のサンプルコードでは、 プレースホルダー(placeholder)の色を「dodgerblue」に変更します。
::placeholder {
color: dodgerblue;
}
特定の入力ボックスのみ色を変更する
上のコードのように「::placeholder」と記述した場合は、 全ての「input」要素と「textarea」要素に適用されます。
例えばtextare要素のみ色を変更したい場合は
「textarea::placeholder」と記述します。
要素にクラス名を指定して「.クラス名::placeholder」
のように記述することも可能です。
IEやEdgeにも対応させる場合
IEや古いEdgeにも対応させる場合は次のように記述します。 但し、Edgeはver79以降（2020年1月） であればプレースホルダーに対応しています。
/* Edge 79 より前の場合*/
::-ms-input-placeholder {
}
/* IE コロンは1つ*/
:-ms-input-placeholder {
}
IEの場合、コロンは1つです。