title: Styling HTML5 number input (spin box) in Chrome
body: <p>Chrome recently updated its input element styles. I really like the <code>number</code> input type, but their new style gives us rounded buttons that don't fit neatly into square input boxes.</p>
  
  <p>I've put in many attempts to get these inputs to change, but they won't budge. From the <code>input[type='number']</code> itself to these buttons:</p>
  
  <pre class="lang-css prettyprint-override"><code>input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
      border-radius: none !important; background: black; color: red;
  }
  
  input:-webkit-autofill { background: black; color: red; }
  </code></pre>
  
  <p>It seems they may not be able to change at all. Does anyone have experience with this? <a href="https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box">I know there's a way to hide the buttons.</a> Ideally I just want to remove their border-radius.</p>
  
  <p>Interestingly, padding seems to work on these buttons. I know they're listening!</p>