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

Question

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?

Wendellwendi

It's also the case with Chrome, so I think this behaviour must be assumed als "by design". Chrome shows it's "user agent styles" in the debugger, there it says: input:not([type="image"]), textarea - border-box – Agamogenesis

Answer 1

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.)

Overtask

IE 6/7/8 in quirks mode uses the border-box box model anyway. – Wassyngton

So we've come full circle. It's taken 17 years of Internet Explorer quirks mode bashing; but we're returning to the original Netscape model sigh – Poirier

Answer 2

You have two options to solve this problem 1)if you write css code for input,it applies for every input element.Instead of using this for evert one of them,just do for specific types

input[type="submit"],input[type="text"]
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

2)I always use class declarations after I reset known tag names.

.MySubmit
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

and use it like

<input type="submit" class="MySubmit" />

I hope this helps.

Headship

Answer 3

There is a css only fix for it

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0;  padding:0 15px 0 15px; }
/*ie9*/ div.search input[type="text"] {   border-left: 25px solid transparent; }
/*ie8*/ div.search input[type="text"] {   border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;}

Thanks Muhammad Atif Chughtai

Matey

Today, you don't have to bother anymore with padding tricks because the relevant browsers understand the box-sizing Tag. You can specify border-box and content-box to declare what model you want. You simply have to keep in mind that input (except type=image) and textarea are border-box by default. – Agamogenesis

Answer 4

I've used this CSS solution to get identical button and text heights; it works in IE, FF and Chrome. Basically, the idea is to force the height of input elements to larger than the default box height. Do this for both text and button:

• Set margins and padding to 0. This gives smallest possible "natural" box.
• Set vertical-align to middle. This compensates for padding=0 to get whitespace above/below text.
• Use height/width to control dimensions of text and button. Text height must be several pixels greater than font height (to override default box dimensions). Height of button must be 2 pixels greater than text (due to differences between text and button box models).

Example:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }

Juxtaposition