CSS テキストボックスのサイズを設定する
CSSでテキストボックスのサイズを設定する方法を紹介します。
サイズを設定するには以下のように、テキストボックスの要素に対してwidth: サイズ;とheight: サイズ;の形式で指定します。
<div>
<input type="text" value="サイズ指定なし">
</div>
<div>
<input type="text" style="width: 200px;" value="幅200px">
</div>
<div>
<input type="text" style="width: 200px; height: 30px;" value="幅200px, 高さ30px">
</div>親要素のサイズに合わせてサイズを変更する
親要素のサイズによって、テキストボックスのサイズを変更するには、サイズを%で指定します。
<div style="width: 300px; border: solid 1px #000;">
<div>
<input type="text" style="width: 100%;" value="幅100%">
</div>
<div>
<input type="text" style="width: 50%;" value="幅50%">
</div>
</div>上記プレビューのように、100%を指定したときに親要素からはみ出る場合があります。
そのような場合は、box-sizing: border-box;のスタイルを指定するとうまくいきます。
詳しくはテキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決するで紹介しています。