html input and select different height

Question

I set height:

input,select{height: 20px;}

but in browser it height is input : 20px and select 18px, I dont know why because before input and select was reseted. If I remove <!DOCTYPE html> then is ok, but then IE not centering page.

Review: http://stackoverflow.com/questions/10001291/aligning-text-and-select-boxes-to-the-same-width-in-css — alditis, Dec 01 '12 at 17:27
http://stackoverflow.com/questions/9767612/issue-with-input-select-tag-height-in-form — Vucko, Dec 01 '12 at 17:28
@Tomas Lietuva, of what ? Select or input box ? For select: http://jsfiddle.net/CUA9p/632/ For input: http://stackoverflow.com/questions/6327703/input-field-styling-css-problem I personally love to work with transparent input field on some image. — Vucko, Dec 01 '12 at 18:16

score 12 · Accepted Answer · answered Dec 01 '12 at 17:26

12

This can be corrected by setting the box-sizing property of your elements to border-box:

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

Vendor specific prefixes like moz- or webkit- might apply.

answered Dec 01 '12 at 17:26

Asad Saeeduddin

46,193
6
90
139

Man, I've been looking for this for 10 minutes. Worst 10 minutes of my day! – Bitterblue Apr 17 '14 at 15:20

score 2 · Answer 2 · answered Jan 02 '13 at 15:43

I was able to set the height of my SELECT to exactly what I wanted in IE8 and 9. The trick is to 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.

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

Here is a working jsFiddle. Would you mind confirming and marking the appropriate answer?

html input and select different height

2 Answers2