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 プログラミング

【簡単】Custom Post Type UI で カスタム投稿タイプのアーカイブページに親ページ(任意の固定ページ)を設定する方法

更新日:2022.04.13
7200
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
12766
HTMLCSS プログラミング

CSSで背景画像を右からを基準にpx指定する方法

2020.07.13
5843
HTMLCSS プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
5786