Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html input and select different height

Tags:

html

select

input

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.

like image 685
Wizard Avatar asked Dec 01 '12 17:12

Wizard


2 Answers

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.

like image 122
Asad Saeeduddin Avatar answered Sep 28 '22 04:09

Asad Saeeduddin


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?

like image 23
Joshua Avatar answered Sep 28 '22 04:09

Joshua