2019年11月03日

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

お世話になっております。佐藤です。

今回は前回にも書きましたplaceholderに関して書いていこうと思います。
前回の『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の色と文字の大きさに関してでした。