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

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

目次

関連記事

プログラミング

【メイクショップ クリエイターモード】コーディング作業で気づいた事

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

wordpressのfeed取得先がEntity: line 2: parser で見れない時の対処方法

2021.10.27
257
PHP プログラミング

phpを使って、ヘッダーやフッターを共通パーツ化・インクルードさせる方法

2021.06.11
183
HTMLCSS プログラミング

【簡単】CSSを使って蛍光マーカー風の下線を引く方法【linear-gradientを使おう】

2022.03.28
134