Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Making buttons the same width as text input fields in Firefox




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 {

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:

Working example

Firefox issue:

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?

like image 480
James Donnelly Avatar asked Mar 25 '23 09:03

James Donnelly

1 Answers

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;
like image 134
Sam Dufel Avatar answered Mar 30 '23 18:03

Sam Dufel