Inconsistent box model between <input type="submit"/> and <input type="text" />

input css border-box
Eric picture Eric · Sep 20, 2009 · Viewed 11.7k times · Source

I realised that <input type="submit"/> has a border-box box model, whereas <input type="text"/> has a content-box box model. This behavior is present in IE8 and FF. Unfortunately, this prevents me from applying this style for nice evenly sized inputs:

input, textarea
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

Is this correct behaviour by IE and FF? And is there a cross-browser way around this problem?

Answer

bobince picture bobince · Sep 20, 2009

Is this correct behaviour by IE and FF?

It's not really stated in the standard how form field decorations are controlled by CSS. Originally they were implementated as OS widgets, in which case border-box sizing would make sense. Later browsers migrated to rendering the widgets themselves using CSS borders/padding/etc., in which case the content-box sizing would make sense. Some browsers (IE) render form fields as a mix of both, which means you can end up with select boxes not lining up with text fields.

And is there a cross-browser way around this problem?

About the best you can do is tell the browser which sizing you want manually using CSS3:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

(Won't work on IE6/7, or IE8 when in quirks or compatibility mode.)

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More