Having an issue with text-align: right on input element with "value" attribute

user_10475018 0
Viewed 109

Not sure if this happens on macOS only, but I have this strange input behavior you can observe in the example below:

.container {
  height: 100px;
  width: 2000px;
  border: 1px solid red;
}

.right-aligned-input {
  text-align: right;
 }
<div class="container"> 

  <label>
    Right aligned input: 
    <input class="right-aligned-input" type="text" value="100" name="right-aligned-input">
  </label>

</div>

The problem is when I hover over the value inside the input it somewhat scrolls/moves, which ends up disturbing my horizontal scroll. How can I solve this while keep using the value attribute? It doesn't happen when I use other text-align variants like "center".

Edit: I meant when I try scrolling horizontally with my touchpad while the cursor is above the input value, horizontal scroll does not work.

Second Edit: Specs and screen capture

Browser: Chrome - v84.0.4147.135

OS: macOS/Mojave - 10.15.5

Tried on Safari, Firefox, Opera this only happens with Chrome (tried with disabled extensions also)

The surface area of this problem is really minimal, thought that I would easily get someone who tumbled upon this before, but it seems I'm wrong :(

Hopefully, someone can reproduce this.

enter image description here

enter image description here

css html
1 Answers

it seems to be a bug with chromes default useragent style sheet adding direction: rtl; manually seems to fix it atleast for me. See reproduction below.

Note manually adding rtl makes the input harder to use, you are better off ignoring the issue.

.container {
  height: 100px;
  width: 2000px;
  border: 1px solid red;
}

.right-aligned-input {
  text-align: right;
  padding: 10px;
  margin: 0;
  display: block;
  font-size: 12px;
  overflow: hidden;
  outline: none;
  border: 1px solid red;
  direction: rtl;
}
<div class="container">

  <label>
    Right aligned input: 
    <input class="right-aligned-input" type="text" value="100" name="right-aligned-input">
  </label>

</div>

user_27575190
Related