html - Prevent horizontal "scrolling" of a text input?

Question

I am working on a format input field in html, css and js.

One example would be a date format field with following pattern: **.**.****. When I am typing in the input fields, Chrome "scrolls" to the left when I reach the end of the box.

How can I prevent this?

The lines that separate each char are made by a background image. With a monospaced font and a set letter-spacing each character goes into a "field". If you reach the size of the input field it scrolls forward and takes the background with it.

To resolve this problem, I put the input element into a div element, limited the div element to a width and added borders and overflow: none; to the div. The result: It works fine in Firefox, Chrome still scrolls the input content to the left.

Am I doing this wrong? Is there an other solution for that? Is there a -webkit property to prevent this? Thank you in advance!

Answer 1

I had the same issue and found a CSS solution:

  #input-wrapper {
    border: 1px solid #C9CFD5;
    background-image: url('grid.png'); /* some tile image for the vertical lines */
    width: 200px;
    height: 50px;
    overflow: hidden;
  }
  #input-wrapper input {
    border: 0 none;
    width: 400px;
    height: 50px;
    background: transparent;
    font-size: 30px;
    font-family: "Courier", monospace;
    letter-spacing: 28px;
    text-indent: 18px;
  }

<div id="input-wrapper">
  <input type="text" maxlength="4" length="4" value="1234" />
</div>