title: Prevent horizontal "scrolling" of a text input?
body: <p>I am working on a format input field in html, css and js.</p>
  
  <p>One example would be a date format field with following pattern: <code>**.**.****</code>. When I am typing in the input fields, Chrome "scrolls" to the left when I reach the end of the box.</p>
  
  <p>How can I prevent this?</p>
  
  <p><img src="https://i.stack.imgur.com/tAM7y.png" alt="enter image description here"></p>
  
  <p>The lines that separate each char are made by a background image. With a monospaced font and a set <code>letter-spacing</code> each character goes into a "field". If you reach the size of the input field it scrolls forward and takes the background with it.</p>
  
  <p>To resolve this problem, I put the input element into a div element, limited the div element to a width and added borders and <code>overflow: none;</code> to the div. The result: It works fine in Firefox, Chrome still scrolls the input content to the left.</p>
  
  <p>Am I doing this wrong? Is there an other solution for that? Is there a -webkit property to prevent this? Thank you in advance!</p>