Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Making buttons the same width as text input fields in Firefox

Making buttons the same width as text input fields in Firefox

Problem

I'm trying to make text Input elements the same width as submit input elements and for some reason I'm struggling with this. (I'm probably missing something incredibly obvious).

In Chrome, Opera, IE9 and IE10, this does the trick:

input {
    box-sizing:border-box;
}

However in Firefox this doesn't fix the issue as the text input remains longer than the submit input (and ultimately longer than any declared width).

Chrome, Opera, IE9 and IE10:

Firefox issue:

Note that I've added a 1px border around each to make the difference a bit clearer.

Here is a JSFiddle example to illustrate this. Note that I'm using the most recent versions of Chrome, Opera and Firefox on Windows 7.

What can I do to ensure that the size is identical in all browsers?

Problem courtesy of: James Donnelly

Solution

Firefox still doesn't support the normal version of box-sizing - you'll have to use the mozilla css extension.

-moz-box-sizing: border-box;
Solution courtesy of: Sam Dufel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Making buttons the same width as text input fields in Firefox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×