title: Input Field appearing different in Chrome and Firefox
body: <p>I've tested in Chrome, it shows fine but when in Firefox, the input box is larger than expected.</p>
  
  <p>Here is the markup:</p>
  
  <pre><code>&lt;div class="form-wrapper"&gt;           
      &lt;input type="search" name="Ofsearch"
              placeholder="Search here..." value=""/&gt; 
      &lt;button id="searchButton" type="submit"&gt;
          Search
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the style:</p>
  
  <pre><code>.form-wrapper {
       height: 80px;
       clear: both;
  }
  
  .form-wrapper input {
       border-radius: 10px;
       border: 5px solid #E5E4E2;
       margin: 2px;
       height: 40px;
       vertical-align: middle;
       padding: 20px;
       margin-top: 15px;
       width: 85%;
  }
  
  .form-wrapper button {
       overflow: visible;
       position: absolute;
       float: right;
       border: 0;
       padding: 0;
       height: 40px;
       width: 110px;
       border-radius: 0 3px 3px 0;
       margin: 20px -118px;
  }
  </code></pre>
  
  <p>Here is the example in <a href="http://jsfiddle.net/J8dSN/1/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>As you can see from the example, when in Chrome and Firefox, they show in different sizes.</p>
  
  <p>When I check this issue, I found the <code>padding:20px</code> in <code>.form-wrapper input{ }</code> has caused this problem. However, when I delete it, Firefox shows fine, but the input area gets smaller in Chrome. Just wondering, any way to make it displayed the same in both browsers.</p>