CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Alvaro Menéndez
Alvaro Menéndez

Reputation: 9022

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

Upvotes: 49

Views: 19932

Answers (6)

Shrinivas Pai
Shrinivas Pai

Reputation: 7711

webshims.setOptions('forms-ext', {
  replaceUI: 'auto',
  types: 'number'
});
webshims.polyfill('forms forms-ext');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<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>

Webshim is a polyfill library that enables you to reliably use HTML5 features across browsers, even if native support is lacking.

JSFiddle demo

Upvotes: 2

DreamTeK
DreamTeK

Reputation: 34297

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

Upvotes: 6

SEFL
SEFL

Reputation: 41

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

Upvotes: 1

S. Werder
S. Werder

Reputation: 51

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

Upvotes: 0

Pedro Pam
Pedro Pam

Reputation: 405

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

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

Upvotes: 11

SpiRT
SpiRT

Reputation: 692

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.

Upvotes: 35

Related Questions