CSS: Submit button looks smaller than text input and textarea

Question

I just noticed this strange rendering of a very simple form.

Here's my markup/CSS: http://jsfiddle.net/a9PLM/

As you can see, text fields and the button share the same styles but their size is quite different.

Why does this happen?

Thanks!

Answer 1

This is because of the box model being used is different for the <input type="submit"> and the <input type="text"> / <textarea> . You can make the box models the same by specifying them with CSS:

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

You can read more about box models here: http://www.quirksmode.org/css/box.html

I edited your jsFiddle to show it working: jsFiddle demo

Answer 2

I think this is a browser rendering issue... with buttons being displayed differently than text inputs.

To fix, add this to your css

form input[type="submit"]{
    width:273px;
}

Example: http://jsfiddle.net/jasongennaro/a9PLM/1/

Answer 3

I've used this CSS-only solution which works in IE, FF and Chrome. Basically, the idea is to manually force the height of input elements to values larger than standard boxes. Do this for both text and button:

• Set margins and padding to 0.
• Set vertical-align to middle.
• Use height/width to control text and button dimensions. Text height must be several pixels greater than font height (in order to override standard box dimensions). Height of button must be 2 pixels greater than text.

Example:

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

Answer 4

Padding on the text fields give it extra space on the sides. Set the padding of inputs and textareas to 0.

Answer 5

The problem is that the form parts are generally not rendered like normal HTML elements, and styling them is always a bit hit-or-miss. I would attempt to avoid a case like this that requires exact sizing, but if you can't, then split the selectors like this:

    form textarea, form input[type=text]
    {
        width:250px;
        padding:10px;
    }
    form input[type=submit] { width: 270px }

Note that I added 20 px (10 x 2) to the width to compensate for padding.