CODEWITHSUNDEEP
htmlselectinput
Wizard
Wizard

Reputation: 11265

html input and select different height

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.

Upvotes: 10

Views: 8422

Answers (2)

Joshua
Joshua

Reputation: 4139

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?

Upvotes: 2

user1726343
user1726343

Reputation:

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.

Upvotes: 12

Related Questions