【CSS】input要素のplaceholderの文字だけサイズを変更する方法
input要素のplaceholder内のテキストだけ文字サイズを小さく・大きくしたい。
この様な悩みを解決いたします。
本記事では擬似要素を使って、placeholder内の文字サイズだけ変更する方法について解説します。
擬似要素::placeholderを使う
input::placeholder {
font-size: 10px;
}
上記、サンプルコードです。
input要素に::placeholder擬似要素を追加し、font-sizeプロパティを指定してあげることによって、placeholderのテキストだけ文字サイズを変更する事ができます。
以上で完了です。
まとめ
input要素だけにfont-sizeを指定してたら、placeholder、入力テキストどちらも文字サイズが変更されてしまいます。
placeholderは注釈用のテキスト、入力テキストは数値にしてる場合、全角・半角で見栄えが悪くなるか思うので、ぜひ本記事で紹介した擬似要素を使って分けてみましょう。
以上で解説を終わります。
目次
