Question

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

用例：

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

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

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

解决方案：

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

您可以在此处看到代码：http://codepen.io/anon/pen/mEmAvz

Answer 1

您可以对calc使用text-indent。像这样：

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/

Answer 2

我不明白你想要什么，但我想是的 <input type="number" style="text-indent: calc(100% - 1.5em);" />

Chrome数字字段水平滚动

2 个答案: