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

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.

enter image description here

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

htmlcssgoogle-chromefirefox


Solution 1:[1]

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

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

Solution 2:[2]

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

Solution 3:[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

Solution 4:[4]

Also old and I'm primarily leaving this one here for myself if this happens again. I ran into a similar problem and here's how I solved it. It presumes that you have a maximum for your number: if not, set a maximum high enough that users will never reach it.

<input type="number" min="1" max="999999" step="1" name="whatever-your-number-field-is" />

The key to solving this in my case was in the maximum value...more specifically, the number of characters/digits in the maximum value. Using the example above, we have 6 digits.

This came into play when I wrote my CSS rules. First, I used the webkit-outer-spin-button/webkit-inner-spin-button/Firefox rules above with a small twist...I used ems for my margin:

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin-left: 0.5em;} 
input[type=number] {-moz-appearance:textfield;}

Then I defined my width using the number of digits above.

input[type='number'] {width: 6em; text-align: right;}

Now, because this is a number field, a user can "type over the boundary" and type a number such as 99999999. I used a jQuery keyup function to automatically lower the number to the max in these cases.

I'll put it together in the snippet below so you can see it.

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin-left: 0.5em;} 
input[type=number] {-moz-appearance:textfield;}
input[type='number'] {width: 6em; text-align: right;}
 <input type="number" min="1" max="999999" step="1" value="1" />

Solution 5:[5]

I know this is old, but I found a other "solution", after stumble over this.

a solution is with text-indent and calc:

[type="number"] {
    text-indent: calc(100% - 20px);
}

I found this solution by check possible css properties for Input on: https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls

Edit:

Sorry, that only work for fix defined number length as it's still left aligned.

A heavy JS solution with that property would be possible using the approach from this code Pen (calculate real text size): https://codepen.io/Momciloo/pen/bpyMbB

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pedro Pam
Solution 2 DreamTeK
Solution 3 Shrinivas Pai
Solution 4 SEFL
Solution 5 marc_s

Related Questions