Geek Answers Handbook

Html and choose a different height

I set the height:

input,select{height: 20px;}

but in the browser, the input : 20px height input : 20px and select 18px , I don’t know why, because it was reset before input and selection. If I remove the <!DOCTYPE html> , then this is normal, but then IE will not center the page.

+8
html input select
source share
2 answers

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

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

Provider specific prefixes, such as moz- or webkit- , can be applied.

+10
source share

I managed to set the height of my SELECT exactly what I wanted in IE8 and 9. The trick is to set the box-sizing property to content-box . This will set the SELECT content area to height, but keep in mind that margin , border and padding values ​​will not be calculated by SELECT width / height, so adjust these 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 . Could you confirm and mark the corresponding answer?

+2
source share

More articles:


All Articles