I can't figure out why the select
element has a larger height than input[type="text"]
.
I thought that line-height
controlled the height of inline elements like select
and input
, but it appears to work slightly different for the select
element.
Example: http://jsfiddle.net/Dismissile/mnBsV/
I am setting the following style:
input[type="text"], select {
padding: 2px;
border: 1px solid #ccc;
margin: 0;
line-height: 16px;
font-size: 14px;
}
I would think that the elements would behave as such:
16px + 4px + 2px (line-height + padding + border) = 22px
This is what it does for the input, but the select is doing:
18px + 4px + 2px
Where is it getting the 18px from? Why aren't they consistent? Tested this in both IE8 and Chrome 15.
fontSize="14pt"; If you simply want to specify the height and font size, use CSS or style attributes, e.g. //in your CSS file or <style> tag #textboxid { height:200px; font-size:14pt; } <!
I couldn't find any explicit references to how high the form elements should be but in http://www.w3.org/TR/css3-ui/#appendix D they do mention the default height of a select is
select[size] {
appearance: list-menu;
display: inline-block;
height: attr(size,em);
}
It gets its height form the font size, whereas every other input has the same style attributes. So it is valid to have a select be a different height from all the other elements. However there is no standard that I could find to define them anyway (Note how the link says it is informative not normative).
So they are different sizes because nobody said they should be the same size.
I was able to get your code to work.
The trick is to:
display
to block
so that the height
property is used.box-sizing
property to content-box
. Doing so will set the content area of the SELECT
to the height, but keep in mind that margin
, border
and padding
values will not be calculated in the width/height of the SELECT
, so adjust those values accordingly.Example
select {
display: block;
padding: 6px 4px;
-moz-box-sizing: content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height: 15px;
}
Please see your updated jsFiddle.
The select components has an implicit button
with outset border
, the solution is use height
and box-sizing: border-box
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With