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

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

目次

関連記事

Illustrator プログラミング

【簡単】Illustrator で基準点を軸にアートボードの横幅・高さを変更する方法

2022.02.26
1582
HTMLCSS プログラミング

【簡単】HTMLのformでリセットボタンを入れる方法

2022.04.17
547
HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
770
プログラミング

【htaccess】ディレクトリ配下をドキュメントルート基準にして読ませる方法【テストサイト】

2020.03.25
1380