Written by Kasumi

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

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

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

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

擬似要素::placeholderを使う

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

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

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

以上で完了です。

まとめ

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

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

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

目次

関連記事

WordPress プログラミング

wordpressで特定のページを非表示にし404ページへリダイレクトする方法

2022.01.15
2042
プログラミング

【簡単】アメブロ記事一覧をサイトに埋め込む方法

更新日:2020.06.12
5626
WordPress プログラミング

【ワードプレス】記事の公開日・更新日が同じとき、更新日を非表示にする方法

2020.06.25
1405
WordPress プログラミング

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

2022.04.21
3388