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.