placeholder(プレースホルダー)の色や文字の大きさの変更する方法

CSS

2021.11.05

前回は「placeholderの改行」について記事を解説していますので、是非ご覧下さい。

placeholderに関してはクライアントからカスタマイズするように依頼されることが結構あります。

・最初から入力されているように見えるので、色を薄くしたいです。
・デザイン上、サイトのベースカラーと合わせて欲しいです。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
 color: #b0c4de;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #b0c4de;
}
::placeholder{ /* Others */
 color: #b0c4de;
}

上記のコードを追加するのが手っ取り早く簡単な方法です。カラーコードはご自由に設定して下さい。逆に「ユーザーが年配者が多いのでplaceholderをもっと濃ゆくして下さい。」と依頼されることもあります。ここでもターゲットのユーザーを意識することは重要だと言えます。

placeholderの文字数を大きくしたいです。

こんな要望もあります。これに関してはinputやtextareaのフォントサイズを変更すればすぐに対応できます。

input, textarea {
 font-size: 20px;
}

以上、placeholderの色と文字の大きさに関してでした。