【CSS】フォームのテキストエリア、テキストボックス、プルダウンボックス等のサイズを揃えるにはbox-sizing を使うと便利

フォームのテキストエリア、テキストボックス、プルダウンボックス等の各部品の横幅をCSSで指定しても、ブラウザによって表示が上手く揃わずニントモカントモ・・・

って感じだったのがやっと解決したので備忘録。

widthだけでは揃わない

とりあえずサンプルを。

<style type="text/css">
.sample1_1{
  width:250px;
  margin:10px 0px 10px 0px;
}
.sample1_2{
  width:250px;
  height:100px;
  resize:none;
  margin:10px 0px 10px 0px;
}
</style>
<form>
<select name="" class="sample1_1">
<option value="" selected>hyde</option>
<option value="">ken</option>
<option value="">tetsuya</option>
<option value="">yukihiro</option>
</select><br>
<input type="text" name="" class="sample1_1"><br>
<textarea name="" class="sample1_2"></textarea>
</form>

各要素のサイズを同じ数値で指定しても、ブラウザによって表示が揃わなかったりします。
特に横幅に差が出るのが気になります。

width や height と併せて box-sizing:border-box; を記述する

こういった場合は、各要素 width や height と併せて、

box-sizing:border-box;

を指定してやると上手く出来ます。

<style type="text/css">
.sample2_1{
  width:250px;
  box-sizing:border-box;
  margin:10px 0px 10px 0px;
}
.sample2_2{
  width:250px;
  height:100px;
  box-sizing:border-box;
  resize:none;
  margin:10px 0px 10px 0px;
}
</style>
<form>
<select name="" class="sample2_1">
<option value="" selected>hyde</option>
<option value="">ken</option>
<option value="">tetsuya</option>
<option value="">yukihiro</option>
</select><br>
<input type="text" name="" class="sample2_1"><br>
<textarea name="" class="sample2_2"></textarea>
</form>

box-sizing プロパティとは

box-sizing プロパティとはボックスサイズ(width,height)の算出方法を指定する際に使用するプロパティです。

指定可能な値は、

• content-box: padding と border の幅を要素の幅と高さに含めない。デフォルト値。
• border-box: padding と border の幅を要素の幅と高さに含める。

といった感じです。

あとがき

使ってみて分かったのですが、これめちゃくちゃ便利です。

もう box-sizing: border-box; をデフォルト値と考えて使っても良いかもです。