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

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.

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

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

Related