Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

box model differences in INPUT and SELECT

the default box-model seems to be different between the two tags

3:37 pm on Jan 26, 2009 (gmt 0)

New User

10+ Year Member

joined:Jan 26, 2009
posts: 21
votes: 0


I'm a newbie here, but I'm a long time php/html/css developer (10+ years of experience).

I have this problem: I'm working in XHTML1.0 Transitional, in IE 7, 8 and FF 3.

What happens is that having set height:22px both on my INPUT and SELECT elements, the INPUTs are 22px tall, while the SELECTs are just 18px.

Isn't this strange? Whatever the box model is on these elements, shouldn't it be the same on both INPUT and SELECT? While i wouldn't be surprised if i found that height:22px doesn't make them be exactly 22px high, i was expecting them to be of the exact same height, whatever would it be...

I found that if I add -moz-box-sizing:content-box; to the SELECT style, the both appear 22px high, albeit only in FF.

But I don't want to resort to proprietary CSS, also because box.-sizing is not available in IE7...

Any ideas on how to solve this in a cross browser and standard compliant way?

5:24 pm on Jan 26, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

AFAIK styling form elements is a rather difficult part. The browsers are given a lot of freedom in how to do it (hint: take a look at e.g. FF3 on mac).

Still you can select the individual elements as you see fit.
The input element is the hardest of them all. But you have an option with selectors working on attributes:
IE6 doesn't do these though, so you'll need to either add scripted support for that or work in another way around it.

Easiest as always is to use conditional comments, that way you can separate out IE workarounds from the standards complaint browsers.

8:51 pm on Jan 26, 2009 (gmt 0)

New User

10+ Year Member

joined:Jan 26, 2009
posts: 21
votes: 0

Thanks for your answer, but as i stated in my question i don't need to support IE6- , just IE7+ which has, AFAIK, support for many useful css selectors.

By the way, my problem is NOT a single browser problem, since the behaviour is EXACTLY the same in IE7, FF3, Opera 9.6 and Safari 3.1.2...

What i was trying to understand is why does the same rule height:22px produce two very different results if applied to input type=text and to select tags...

I'm already using a base style sheet for standard compliant browsers adding a second IE7 style sheet to correct IE bugs.

8:46 pm on Jan 28, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts: 266
votes: 0

Yep, at least in the browser you're using, text INPUTs have a 2px border while SELECTs don't. I couldn't say that this is universal though.

I'd govern the height of your elements with font-size if I were you, and maybe see what the browser support is like for line-height.

Don't use a padding reset (* {padding: 0;}) as you'll strip out the padding that Firefox uses in SELECTs and IE doesn't. Far easier to not break it in the first place than to have to hack together fixes.

3:48 pm on Jan 29, 2009 (gmt 0)

New User

10+ Year Member

joined:Jan 26, 2009
posts: 21
votes: 0

I've resolved this way: since the box sizing algorithm for form widgets should be the border-box one (they are replaced elements such as IMG tags), the problem is NOT in SELECTs as i thought, but instead in input text and textarea: they get sized with the content-box algorithm, which is WRONG! So i wrote:

input.text, textarea

And that solved the problem in all browsers, except for IE7 which i already feeded with a separate CSS since it has many bugs of its own... :)


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members