如何正确对齐时如何向输入类型="数字"添加填充权限？

Question

我无法相信我无法找到任何有关此问题的信息.

在我的新项目中,未来的用户将有一个列有一些input type="number",并作为数字字段(没有text一个)我希望数字对齐右边.

我发现这些数字太靠近箭头了,所以从逻辑上讲,我给它们添加了一个padding-right.

令我惊讶的是,我似乎无法将数字与箭头分开.padding-right沿着数字移动箭头.

基本上只能Opera做padding正确的方式.但是到目前为止我没有测试过其他主要的3个浏览器,如下图所示.

所以.有没有办法将数字与箭头分开,所以它至少在Firefox和Chrome(我们建议我们的网络应用程序的这两个浏览器？)

一个带有简单示例的JSFIDDLE

Answer 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插件"玩".

Answer 2

这很烦人，就我而言，我通过将微调器传递到左侧解决了这种情况。

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

Answer 3

CSS 中的字段左对齐

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

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