Chrome search input width not same as text input
<p>In Firefox text and search input types both appear to be the same width.</p>

<p>In Chrome they are different widths. </p>

<p>Funnily enough my Codepen <a href="http://codepen.io/rachelreveley/pen/eBpyzK" rel="nofollow noreferrer">http://codepen.io/rachelreveley/pen/eBpyzK</a> has the opposite result to my actual code (search appears wider).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input {
  width: 100%; 
  padding: 1rem;
  box-sizing: padding-box !important;
}

form {width: 500px;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
 &lt;input type="search" placeholder="Search" /&gt;
 &lt;input type="text" placeholder="Text" /&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://i.stack.imgur.com/03ilv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/03ilv.jpg" alt="enter image description here"></a></p>