【CSS】input要素のplaceholderの文字だけサイズを変更する方法

input要素のplaceholder内のテキストだけ文字サイズを小さく・大きくしたい。

この様な悩みを解決いたします。

本記事では擬似要素を使って、placeholder内の文字サイズだけ変更する方法について解説します。

擬似要素::placeholderを使う

input::placeholder {
 font-size: 10px;
}

上記、サンプルコードです。

input要素に::placeholder擬似要素を追加し、font-sizeプロパティを指定してあげることによって、placeholderのテキストだけ文字サイズを変更する事ができます。

以上で完了です。

まとめ

input要素だけにfont-sizeを指定してたら、placeholder、入力テキストどちらも文字サイズが変更されてしまいます。

placeholderは注釈用のテキスト、入力テキストは数値にしてる場合、全角・半角で見栄えが悪くなるか思うので、ぜひ本記事で紹介した擬似要素を使って分けてみましょう。

以上で解説を終わります。

Ads

関連記事

WordPress プログラミング

【WordPress】is_single()、is_singular()条件分岐について使い方を解説

2022.04.21
26
WordPress プログラミング 未分類

【簡単】wordpressのアーカイブでタイトルの文字数を制限して表示、3点リーダーを付ける方法

2022.02.28
78
HTMLCSS プログラミング

【簡単】tableタグをスマホでは縦並びにする方法【レスポンシブ】

2022.01.18
692
PHP プログラミング

【php】文字列を比較し、部分一致で条件分岐する方法

2021.12.24
197