CODEWITHSUNDEEP
htmlcssstyles
willvv
willvv

Reputation: 8639

CSS: Submit button looks smaller than text input and textarea

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!

Upvotes: 12

Views: 14773

Answers (5)

Rusty Fausak
Rusty Fausak

Reputation: 7525

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: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

I edited your jsFiddle to show it working: jsFiddle demo

Upvotes: 32

Lambtron
Lambtron

Reputation: 69

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

Upvotes: 0

Sajid
Sajid

Reputation: 4421

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.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 1

mikevoermans
mikevoermans

Reputation: 4007

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

Upvotes: 0

Related Questions