Making buttons the same width as text input fields in Firefox

Question

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?

Answer 1

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;