セレクトボックスのbox-sizingの初期値はborder-box

HTMLのセレクトボックス(<select>タグ)の高さをCSSで変更してみたものの、なぜかうまくいかないという。

具体的にいうと、想定していた大きさよりも小さくなってしまうという自体に。
例えば、上記のサンプルではheightを25pxとしているのに、Google Chromeのデベロッパーツールでレイアウトを確認してみると、実際のコンテンツ領域は21pxとなっています。
boxmodel

IEで見てもFirefoxで見ても同じ。IE10のドキュメントモードをIE7にしても同じ。
おかしいなぁ。と思いながらデベロッパーツールのスクロールバーをあげてみるとこんな記述が。
boxsizing

select {
    box-sizing: border-box;
}

box-sizingの初期値がborder-boxということってあるんですね。
というわけで、box-sizingをcontent-boxとすることによって、想定の動きとなりました。

2013/10/10追記:
もう少し調べてみると、ボタンもbox-sizingの初期値はborder-boxでした。
テキストボックスやテキストエリアはcontent-box。

コメント

タイトルとURLをコピーしました