铬数字字段水平滚动

Chrome number field horizontal scroll

本文关键字：滚动 水平 字段 数字      更新时间：2023-09-26

我创建了一个数字字段，里面的文本向右对齐。

UseCase:

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

您可以通过下面的代码看到它的作用:

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

解决方案:

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

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

您可以使用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/

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

相关文章：