placeholder(プレースホルダー)の表示とCSSでの装飾【HTML/CSS】

HTMLのinput要素やtextarea要素に入力例等を表示出来るplaceholder(プレースホルダー)。
プレースホルダーの表示の仕方から、CSSでの色の変更などを解説していきます。

placeholder(プレースホルダー)の表示

HTMLのinput要素やtextarea要素でプレースホルダーを表示するには、以下のようにplaceholder属性を追加します。
プレースホルダーは、入力例などの入力のヒントとなるような短いテキストを表示するものとなります。「※○○文字以内」や「※英数字のみ」などの注意書きに関しては、別のテキストとして表示してください。

<input type="text" placeholder="ここにプレースホルダーが入ります">

input要素のtypeが「text」「search」「url」「tel」「email」「password」で使用可能です。

placeholder(プレースホルダー)の色を変更する方法

プレースホルダーの色を変更するには、CSSの疑似要素::placeholderを使用します。
色の他にもfont-weightやfont-styleなども変更可能です。

ブラウザによって若干の違いはありますが、デフォルトで少し濃いめの色になっていますので、薄めの色に変更してあげる事で入力例として視認しやすくなります。
※以下の例はわざと明るめの色などにしてあります。

<!-- グレー -->
<input type="text" class="placeholder_color1" placeholder="ここにプレースホルダーが入ります">

<!-- 赤 -->
<input type="text" class="placeholder_color2" placeholder="ここにプレースホルダーが入ります">

/* グレー */
.placeholder_color1::placeholder {
    color: #999;
    font-style: italic;
}

/* 赤 */
.placeholder_color2::placeholder {
    color: red;
    font-weight: bold;
}

ブラウザの対応状況

一部のブラウザ(IEや古いEdgeやChrome)は対応していないものもありますので、対応する場合は以下のベンダープレフィックスを記述します。

/* Webkit系 */
::-webkit-input-placeholder {
    color: #999;
}

/* IE */
:-ms-input-placeholder {
    color: #999;
}

/* Edge */
:-ms-input-placeholder {
    color: #999;
}

さいごに

いかがでしたでしょうか。
inputやtextareaは多くのサイトのフォーム等で使用しますので、サイトに合わせて見やすく入力例だと視認しやすい色などを気を付けるようにしてください。