<body>
  <div class="box">
    <input type="text" class="otp" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="\d{6}" data-qa="submit-button" id="submit1" placeholder="000000" required>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
    </style>
    <div class="digit-underrine-box">
      <span class="underline"></span>
      <span class="underline"></span>
      <span class="underline"></span>
      <span class="underline"></span>
      <span class="underline"></span>
      <span class="underline"></span>
    </div>
  </div>
</body>
body {
  background-color: #091833;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  border: none;
  font-size: 20px;
  font-weight: 500;
  margin-left: 55px;
  padding: 0;
  width: 196px;
  background-color: transparent;
}

input {
  padding: 0;
  text-indent: 7px;
  width: 226px;
  height: 32px;
  font-size: 20px;
  border: none;
  letter-spacing: 22px;
  text-decoration: solid;
  background-color: transparent;
  caret-color: transparent;
  color: #0abdc6;
  font-family: "Roboto Mono", monospace;
  outline: none !important;
}
input:focus {
  outline: none;
  color: cyan;
}
input::selection {
  background: #00465e;
}
.digit-underrine-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 196px;
}

.underline {
  width: 24px;
  height: 2px;
  background-color: #701c91;
}
.underline-active {
  background-color: #068ddb;
  background-color: magenta;
}

let otpInput = document.getElementById("submit1");
let underlines = document.getElementsByClassName("underline");

function setUnderscore(position) {
  return underlines[position].classList.add("underline-active");
}

function removeAllUnderscores() {
  for (var i = 0; i < 6; i++) {
    underlines[i].classList.remove("underline-active");
  }
}

const setUnderline = (e) => {
  // first remove all underscores
  removeAllUnderscores();

  // if clicked set underscore to carret position
  if (e.type === "click") {
    setUnderscore(otpInput.selectionStart);
  }

  if (e.type === "paste") {
    let paste = e.clipboardData.getData("text");
    return setUnderscore(paste.length);
  }

  if (e.type === "keydown") {
    // allow to paste code
    const copyPasteKeyCodes = [17, 18, 91, 93, 86];
    if (copyPasteKeyCodes.includes(e.keyCode)) {
      return;
    }

    let index = otpInput.selectionStart + 1;

    // backspace / left arrow / delete
    const specialKeys = [8, 37, 38, 39, 46];
    if (
      // Numbers between 0-9 (includes numpad)
      (e.keyCode >= 48 && e.keyCode <= 57) ||
      (e.keyCode >= 96 && e.keyCode <= 105) ||
      specialKeys.includes(e.keyCode)
    ) {
      // backspace / left arrow
      if (e.keyCode === 8 || e.keyCode === 37) {
        index = otpInput.selectionStart - 1;
      }
      // right arrow
      if (e.keyCode === 39) {
        if (otpInput.selectionStart === otpInput.value.length) {
          return setUnderscore(otpInput.selectionStart);
        }
      }
      // delete
      if (e.keyCode === 46) {
        index = otpInput.selectionStart;
      }

      if (index < 0) {
        return setUnderscore(0);
      }

      if (index < 6) {
        setUnderscore(index);
      }
    } else {
      setUnderscore(otpInput.selectionStart);
      e.preventDefault();
    }
  }
};

otpInput.addEventListener("keydown", (e) => setUnderline(e));
otpInput.addEventListener("click", (e) => setUnderline(e));
otpInput.addEventListener("paste", (e) => setUnderline(e));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.