title: How to create a 4 digit input series without JavaScript?
body: <p>I have a form <strong>input</strong> in which I want to enter a <strong>four-digit number</strong> (verification code). My problem is that after entering the fourth number, the structure and order of the PIN-code breaks down. Because the text pointer goes to the fifth character while I have defined four characters.</p>
  <p>Is there a way to solve this problem with pure CSS? Or at least with pure JavaScript?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pinBox {
    display: inline-block;
    overflow: hidden;
    position: relative;
    direction: ltr;
    text-align: left;
  }
  
  .pinBox:before {
    position: absolute;
    left: 0;
    right: 0;
    content: '';
    pointer-events: none;
    display: block;
    height: 75px;
    width: 300px;
    background-image: url(https://i.stack.imgur.com/JbkZl.png);
  }
  
  .pinEntry {
    position: relative;
    padding: 16px 29px;
    font-family: courier, monospaced;
    font-size: xx-large;
    border: none;
    outline: none;
    width: 302px;
    letter-spacing: 55px;
    background-color: transparent;
    overflow: hidden;
    text-align: left;
    direction: ltr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.css"/&gt;
  
  &lt;form role="form" method="POST" action=""&gt;
    &lt;div class="row my-4"&gt;
      &lt;div class="col-12 text-center"&gt;
        &lt;div class="pinBox"&gt;
          &lt;input class="pinEntry" name="token" type="text" maxlength="4" value=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="text-center"&gt;
      &lt;button type="submit" class="btn btn-primary mt-2"&gt;submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>here is a <a href="https://jsfiddle.net/8o6shp0a/3/" rel="nofollow noreferrer">jsfidde demo</a></p>