html - select 要素の幅が他のフォーム要素ほど広くないのはなぜですか?

Question

選択要素とテキスト入力を同じ幅に設定すると、選択要素の幅は常にテキスト入力の幅よりも数ピクセル小さくなります。これは、幅をピクセルまたはパーセントで設定した場合に発生するようです。誰かが理由を知っていますか？これを防ぐ方法はありますか？

最小限のデモ: http://codepen.io/nosecreek/pen/wehKu

Chrome および IE7 でテスト済み

Answer 1

レンダリングされるボックスのサイズ設定と関係があると思います。選択したビジュアルパーツは、幅を定義するボックスよりも小さくなっています。これをcssに含めると、正常に表示されます。

input, select {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
} 

http://codepen.io/joe/pen/taJnz

参照：HTMLで入力とテキスト入力を選択する-同じ幅にするための最良の方法は？

編集：私はこれがなぜ起こるのか理解しました。幅を指定するときに、内部ボックス、実際の入力領域をどれだけ大きくするかを指定しているためだと思います。テキストボックスには標準で境界線も付属しており、境界線はそれぞれ2pxで、テキスト領域の幅に追加のサイズです。上記のCSSを追加すると、幅の計算方法が変わります。テキストボックスの境界線を1ピクセルにすると、選択したものより2ピクセルだけ大きくなりました。これはそれを説明しているようです。