Как я могу добавить padding-right к типу ввода = "число" при правильном выравнивании?

Не могу поверить, что я ничего не смог найти об этой проблеме.

В моем новом проекте будущий пользователь будет иметь столбец с некоторым input type="number", а как числовые поля (нет ни одного text), я хочу, чтобы числа выравнивались вправо.

Я нашел числа слишком близко к стрелкам, поэтому логически я добавил к ним padding-right.

К моему удивлению, кажется, я не могу отделить немного цифр от стрелок. padding-right перемещает стрелки вдоль чисел.

В основном только Opera правильный путь padding. но не другие основные 3 браузера, которые я тестировал, пока вы можете видеть на изображении ниже.

Итак. Есть ли способ отделить числа от стрелок, чтобы он работал, по крайней мере, в Firefox и Chrome (как мы рекомендуем для нашего веб-приложения эти 2 браузера?)

a JSFIDDLE с простым примером

Ответ 1

Вместо использования padding-right используйте следующий CSS

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

и для Firefox выше решение не будет работать, поэтому лучшим решением является просто скрыть его:

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

или вы можете попробовать "играть" с некоторым плагином jquery.

Ответ 2

Это довольно раздражает, в моем случае я решил ситуацию, пропустив счетчик слева.

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

Ответ 3

Попробуйте это

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');

Демо здесь

Ответ 4

Выровнять по левому краю поле в CSS

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

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