title: Making buttons the same width as text input fields in Firefox
body: <p>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).</p>
  
  <p>In Chrome, Opera, IE9 and IE10, this does the trick:</p>
  
  <pre><code>input {
      box-sizing:border-box;
  }
  </code></pre>
  
  <p>However in Firefox this <em>doesn't</em> fix the issue as the text input remains longer than the submit input (and ultimately longer than any declared width).</p>
  
  <p><strong>Chrome, Opera, IE9 and IE10:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/5JRqG.png" alt="Working example"></p>
  
  <p><strong>Firefox issue:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/AtqwM.png" alt="Firefox issue"></p>
  
  <p><em>Note that I've added a 1px border around each to make the difference a bit clearer.</em></p>
  
  <p>Here is a <a href="http://jsfiddle.net/DmQcw/3/" rel="nofollow noreferrer">JSFiddle example</a> to illustrate this. Note that I'm using the most recent versions of Chrome, Opera and Firefox on Windows 7.</p>
  
  <p>What can I do to ensure that the size is identical in all browsers?</p>