title: Styling <input type=number/> spinner arrows the right way
body: <p>The arrows of <code>&lt;input type=&quot;number&quot;/&gt;</code> in Mac are extremely small and not useful both on Chrome and Firefox even on Safari.</p>
  <p><a href="https://i.stack.imgur.com/2RdXg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2RdXg.gif" alt="" /></a></p>
  <p>What is the right way to style them without adding extra arrow images and etc. Note that I've already seen these thread and it didn't solve the issue:
  <a href="https://stackoverflow.com/questions/26024771/styling-a-input-type-number">Styling a input type=number</a></p>
  <p>the out comes for that thread on MacOS are these:</p>
  <p><a href="https://i.stack.imgur.com/AUnc8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AUnc8.png" alt="LcSalazar" /></a>
  <a href="https://i.stack.imgur.com/7QHdn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7QHdn.png" alt="enter image description here" /></a></p>