javascript - Chrome 数字字段水平滚动

Question

我创建了一个数字字段，其中的文本右对齐。

用例:

如果您选择全文或，当您在输入字段内使用鼠标中键滚动时，我注意到可以将文本滚动大约 1 像素 向左。到目前为止，我只能在 Chrome 中引发这种行为。

您可以使用以下代码查看它的运行情况:

<input type="number" value="15" style="text-align: right;" />

解决方案:

我可能可以禁用元素上的滚动，但我想问你是否有一种优雅的方法来解决这个问题。

在这里你可以看到代码:http://codepen.io/anon/pen/mEmAvz

Answer 1

您可以在 calc 中使用文本缩进。像这样:

html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

input {
  width: 100%;
  text-indent: calc(100% - 1.5em);
  font-size: 1em;
}

https://jsfiddle.net/VilleKoo/u2ead3gz/1/