Chrome number field horizontal scroll

Question

I created a number field which has the text inside aligned to the right.

UseCase:

If you select the full text or when you use your middle mouse button inside of the input field to scroll I noticed that it is possible to scroll the text for about 1px to the left. So far I could only provoke this behavior in Chrome.

You can see it in action with this code:

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

Solution:

I could probably disable the scrolling on the element but I wanted to ask you if there is an elegant way to fix this.

Here you can see the code: http://codepen.io/anon/pen/mEmAvz

Answer 1

You could use text-indent with calc. Like so:

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/