Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does select have a slightly larger height than input[type=text]?

Tags:

html

css

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.

like image 611
Dismissile Avatar asked Nov 18 '11 21:11

Dismissile


People also ask

How do you increase input type text height?

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; } <!


3 Answers

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.

like image 189
Andrew Avatar answered Oct 19 '22 12:10

Andrew


I was able to get your code to work.

The trick is to:

  1. Set the display to block so that the height property is used.
  2. Set the 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.

like image 4
Joshua Avatar answered Oct 19 '22 11:10

Joshua


The select components has an implicit button with outset border, the solution is use height and box-sizing: border-box.

like image 4
uruapanmexicansong Avatar answered Oct 19 '22 10:10

uruapanmexicansong