ブラウザ別、プレースホルダ文字列のデフォルト配色

下図は、Windows10版のChrome、Edge、Firefoxで、テキスト入力欄にプレースホルダ文字列を指定してみた場合のキャプチャ画像です。ここまで濃い色で表示されると、「既に名前や住所が入力済みである」と誤解されても仕方がなさそうです。

あくまでも「入力例が表示されているだけですよ」と示すためには、プレースホルダ文字列はもっともっと薄い文字色で表示しておく方が良いでしょう。

プレースホルダの文字色をCSSで指定する方法

CSSで装飾する方法の前に、まず対象となるHTMLソースとベースの見た目をご紹介しておきます。
ここでは下記のようなテキスト入力欄が作られている場合を例にします。テキスト入力欄は主に「input要素で作る1行入力欄」と「textarea要素で作る複数行入力欄」があります。どちらで作る場合でも、プレースホルダを指定できます。CSSでの装飾方法はどちらも同じです。ここでは例として、両方を1つずつ用意しておきます。

上記は、大きさや枠線を整えるために少し装飾を加えていますが、プレースホルダ文字列に対しては何も装飾していない状態です。（何も文字が入力されていない状態なので、プレースホルダとして指定された文字列が表示されています。実際に入力欄内のカーソルを入れて何か文字を入力してみて下さい。すると、プレースホルダ文字列は消えます。）

上記では例として、プレースホルダ文字列には名前と住所を指定してあります。
プレースホルダには「記入例」を書くのが一般的ですが、上記のような記入例を表示していると「本当にその文字が既に入力されている」と誤解される可能性もありそうな点が問題です。

このような表示になるHTMLソースは、下記の通りです。

<form>
   ▼適当なテキストフォーム(1行入力欄)：<br>
   <input type="text" placeholder="山田花子" class="target1"><br>
   ▼適当なテキストエリア(複数行の入力欄)：<br>
   <textarea placeholder="大阪府大阪市中央区難波千日前" class="target2"></textarea><br>
</form>

上記のHTMLソースでは、CSSで個別に装飾する可能性を考慮して、

• 1行のテキスト入力欄を作るinput要素に対してはtarget1というclass名を付加し、
• 複数行のテキスト入力欄を作るtextarea要素に対してはtarget2というclass名を付加しています。

※これらのclass名は、CSSの書き方によっては不要です。（本記事では、後のサンプルCSSソースで少しだけ使っています。）

プレースホルダ（＝テキスト入力欄に何も入力されていない状況でのみ表示される文字列）は、どちらもplaceholder属性の値として記述します。値に指定した文字列がそのままプレースホルダ文字列として表示されます。

次に、これらの入力欄対してCSSで装飾を追加しましょう。

プレースホルダだけを対象にして装飾するCSS ::placeholder疑似要素

CSSには、プレースホルダだけを対象にして装飾ができる「::placeholder」という疑似要素があります。これを下記のように使うと、プレースホルダ文字列だけを対象にして装飾ができます。

::placeholder { /* プレースホルダ用の装飾 */ }

とても簡単です。
疑似要素なので、頭のコロン記号は2つ必要です。

▼もし、textarea要素のプレースホルダだけを対象にしたいなら、以下のようにtextareaをセレクタに加えれば良いでしょう。

textarea::placeholder { /* プレースホルダ用の装飾 */ }

▼もし、input要素のプレースホルダだけを対象にしたいなら、以下のようにinputをセレクタに加えれば良いでしょう。

input::placeholder { /* プレースホルダ用の装飾 */ }

▼もし、プレースホルダの装飾対象をclass名で限定したいなら、以下のように任意のクラス名（下記では「target1」）をセレクタに加えれば良いでしょう。

.target1::placeholder { /* プレースホルダ用の装飾 */ }

▼さらに、「class名としてtarget1が指定されたinput要素」に限定してプレースホルダを装飾したいなら、以下のように要素名とclass名の両方を書いた上で::placeholder疑似要素を書くこともできます。

input.target1::placeholder { /* プレースホルダ用の装飾 */ }

具体的なCSSソースの記述例や表示例を以下に少しご紹介しておきます。

すべての入力欄のプレースホルダを対象にするCSSの書き方

すべてのテキスト入力欄にあるプレースホルダ文字列を一括して対象にするなら、以下のように疑似要素名だけをセレクタに指定する方法でCSSソースを書けば済みます。

::placeholder {
   font-size: 0.75em;
   color: #aaa;
}

ここでは、文字サイズを75％に縮小し、文字色をかなり薄い灰色(#aaa)にしています。
セレクタには「::placeholder」としか書いていないので、このCSSが適用される範囲内に存在するすべてのプレースホルダが装飾対象になります。

※表示例：

上記では、input要素で作る1行入力欄に表示されているプレースホルダ文字列も、textarea要素で作る複数行入力欄に表示されているプレースホルダ文字列も、両方が同じように装飾されているのが分かります。

特定の入力欄のプレースホルダだけを対象にするCSSの書き方

▼特定の要素だけ

特定の要素のプレースホルダだけを対象にしたいなら、以下のようにセレクタに要素名を加えてCSSを書けば良いでしょう。

textarea::placeholder {
   font-style: italic;
   color: #bbb;
}

上記の場合は、textarea要素に指定されているプレースホルダ文字列に限定して、かなり薄い灰色(#bbb)の斜体で表示するように指定しています。

※表示例：

▼特定のclassだけ

また、特定のclass名が付加された要素にあるプレースホルダだけを対象にしたいなら、以下のようにセレクタにclass名を加えてCSSを書くこともできます。

.target1::placeholder {
   color: #daa;
}

上記の場合は、「target1」というclass名が付加された要素にあるプレースホルダ文字列に限定して、少し赤みがかった薄い灰色で表示するように指定しています。

※表示例：

装飾されるのはあくまでもプレースホルダ文字列だけなので、ユーザが入力する文字はデフォルト配色のままです。（上記の入力欄に何か適当に文字を入力して確かめてみて下さい。）

ユーザが入力する文字列も併せて装飾する書き方

テキスト入力欄で装飾できるのは、もちろんプレースホルダ文字列だけではありません。ユーザが入力する文字を装飾することもできます。
その方法は、プレースホルダの装飾よりももっと単純で、ただ「textarea要素そのもの」や「input要素そのもの」に対して装飾を指定すれば良いだけです。

例えば、

• プレースホルダ文字列は、明るい紫色の小さい文字で表示するが、
• ユーザが入力する文字列は、濃い青色の普通サイズで表示したい。

という場合は、以下のように記述できます。（装飾対象がtextarea要素で作る複数行入力欄の場合）

textarea {
   color: #c0c;    /* 明るい紫色 */
   font-size: 1em; /* 普通の文字サイズ */
}
textarea::placeholder {
   color: #bbb;      /* 薄い灰色 */
   font-size: 0.8em; /* 小さい文字サイズ */
}

※表示例：

上記の表示例でのテキスト入力欄には、最初は（何も入力されていないので）プレースホルダ文字列が小さな薄い灰色で見えているはずです。実際に何かを入力してみると、普通サイズの明るい紫色の文字で入力されるはずです。

サンプルソース（HTML＋CSS）と動作例

今回ご紹介したテキスト入力欄のサンプルについて、参考までに枠線の装飾なども含めた全体のソースを以下に掲載しておきます。

<form>
   ▼適当なテキストフォーム(1行入力欄)：<br>
   <input type="text" placeholder="山田花子"<br>
   ▼適当なテキストエリア(複数行の入力欄)：<br>
   <textarea placeholder="大阪府大阪市中央区難波千日前"></textarea><br>
</form>

/* ▼両要素に共通の装飾 */
input,
textarea {
   font-size: 16px;         /* 文字サイズ */
   border: 1px solid #555;  /* 枠線 */
   border-radius: 3px;      /* 角丸 */
   width: 270px;            /* 横幅 */
   padding: 5px 3px;        /* 内側の余白量(パディング) */
   line-height: 1.2;        /* 行の高さ */
   margin-bottom: 0.5em;    /* 下側の余白量(マージン) */
   background-color: white; /* 背景色 */
}
/* ▼textarea要素だけの装飾 */
textarea {
   height: 4.5em;           /* 入力欄の高さ */
}
/* ▼プレースホルダの装飾 */
::placeholder {
   font-size: 0.9em;        /* 文字サイズ */
   color: #bbb;             /* 文字色 */
}

上記のソースを表示すると、以下のように見えます。

上記の動作サンプルは、以下のように動作するはずです。

• テキストエリア内が空の場合は、薄い小さな文字でプレースホルダ文字列が表示されている。
• テキストエリア内に何かが入力されたら、黒色の普通サイズの文字で入力される。

プレースホルダとして表示される文字列がここまで薄ければ、「既に何かが入力済みだ」という誤解は避けやすいでしょう。

以上、プレースホルダの文字列をもっと薄く表示させるCSSの書き方でした。
ぜひ、使ってみて下さい。

(更新日：2020年06月10日)