html - 右对齐时如何向输入类型 ="number"添加 padding-right？

Question

我不敢相信我找不到关于这个问题的任何信息。

在我的新元素中， future 的用户将拥有一个包含一些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 插件。