title: How can I add padding-right to an input type="number" when aligning right?
body: <p>I can't believe I haven't been able to find anything about this problem.</p>
  
  <p>In my new project the future user will have a column with some <code>input type="number"</code>, and as numeric fields (there is not a single <code>text</code>one) I want the numbers aligned to the right.</p>
  
  <p>I found the numbers too close to the arrows so, logically, I added to them a <code>padding-right</code>.</p>
  
  <p>To my surprise, It seems I can't separate a little the numbers from the arrows. <code>padding-right</code> moves the arrows along the numbers.</p>
  
  <p>Basically only <code>Opera</code> do the <code>padding</code> the right way. but not the other main 3 browsers I have tested so far as you can see in the image below.</p>
  
  <p><a href="https://i.stack.imgur.com/8E7tR.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8E7tR.jpg" alt="enter image description here"></a></p>
  
  <p>So. Is there any way to separate numbers from arrows so it works at least in <code>Firefox</code> and <code>Chrome</code> (as we recomend for our web app's these 2 browsers?) </p>
  
  <p>a <a href="http://jsfiddle.net/alvaromenendez/vaLa8yst/" rel="noreferrer">JSFIDDLE</a> with a simple example</p>