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?

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

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.

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

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; }