Chrome数字字段水平滚动

Question

我创建了一个数字字段,其中的文本内部与右边对齐.

用例:

如果您选择全文或在输入字段内部使用鼠标中键进行滚动,我会注意到可以将文本向左滚动约1px.到目前为止,我只能在Chrome中引发这种行为.

您可以使用以下代码查看它:

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

解:

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

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

Answer 1

您可以将文本缩进与计算一起使用。就像这样：

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/