How can I add padding-right to an input type="number" when aligning right?

Question

I can't believe I haven't been able to find anything about this problem.

In my new project the future user will have a column with some input type="number", and as numeric fields (there is not a single textone) I want the numbers aligned to the right.

I found the numbers too close to the arrows so, logically, I added to them a padding-right.

To my surprise, It seems I can't separate a little the numbers from the arrows. padding-right moves the arrows along the numbers.

Basically only Opera do the padding the right way. but not the other main 3 browsers I have tested so far as you can see in the image below.

So. Is there any way to separate numbers from arrows so it works at least in Firefox and Chrome (as we recomend for our web app's these 2 browsers?)

a JSFIDDLE with a simple example

Answer 1

Rather than using padding-right use the following CSS

input::-webkit-outer-spin-button,  input::-webkit-inner-spin-button { margin-left: 20px; }  

and for Firefox above solution won't work, so the best solution is just to hide it :

input[type=number] {     -moz-appearance:textfield; } 

or you can try to "play" with some jquery plugin.

Answer 2

This is pretty annoying, in my case i solved the situation by passing the spinner to the left.

<input dir="rtl" type="number"/>