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\"

Answer 1

Left align the field in CSS

[type="number"] {
  text-align: right;
  direction: rtl;
}

<input type="number" min="0" max="9999" placeholder="Enter value ...">

As suggested by @Pedro Pam

Answer 2

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 3

Try this

HTML

<div class="form-row">
<input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" />
</div>

JS

webshims.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'number'
});
webshims.polyfill('forms forms-ext');

Demo Here

Answer 4

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

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