【CSS/html】inputテキストボックスのフォントサイズ変更方法

「テキストボックスの文字サイズがなんか小さい!?」

inputテキストボックスのフォントサイズ変更方法を解説します。

ボタンのフォントサイズ変更方法はこちら↓

font-sizeで文字サイズ変更

テキストボックスのvalueやplaceholderのフォントサイズを変えるにはCSSのfont-sizeを指定します。

<style>
input[type="text"]{
    font-size: 150%;
}
</style>
<input type="text" value="テキストボックス">

テキストボックスは「input[type="text"]」で指定できます。その他、telやemailも使う場合はそれらも指定する必要があります。詳しくは下記をご覧ください。

font-sizeが効かない場合は下記を参考にしてください。

htmlかbodyにfont-sizeを指定して継承

htmlかbodyにfont-sizeを指定してしておくとinputにも継承します。

body{
    font-size: 100%;
}

inputはデフォルトでは一回り小さい文字サイズになっています。

htmlかbodyにfont-sizeを指定してしておくとinputが同じ文字サイズになります。

とくにデフォルト値の16pxのままでいいとき、htmlやbodyにfont-sizeを指定しない場合があります。こうなるとinputの文字サイズが小さくなってしまいます。

16pxのままでいくときでもhtmlかbodyに「font-size:100%」を指定しておくといいでしょう。

ただし、font-familyの継承はひと癖ありますので下記をご覧ください。

【非推奨】fontタグのsize属性

CSSを使わずhtmlだけでもfontタグのsize属性を指定することで文字サイズを大きくすることができます。

<font size="+1"><input type="text" value="テキストボックス" class="example" placeholder=""></font>

ただし、fontタグもsize属性もhtml5から非推奨になっています。

CSSでできることはCSSでやることになったためです。

しかもボタンにCSSでfont-sizeが%指定されているという条件付きです。

よってここでは詳しく解説しません。

CSSのfont-sizeを覚えていってくださいね。

【まとめ】テキストボックスのフォントサイズ変更方法

inputにfont-sizeを指定する。

デフォルトの文字サイズでいくときでもhtmlかbodyに「font-size:100%」を指定する。

以上、inputテキストボックスのフォントサイズ変更方法でした。