Create a split by digit pin input from a single HTML input

Question

I have an app, that requires an SMS code for login. I've added a technically identical example below.

For accessibility reasons, I want this SMS code thing to be a single <input> in the HTML. I also would be happy to delete the code that handles the transitions between the digits, and copy~paste.

Is it possible to implement using a single input? If so how?

Drawing DIVs right over the input, is a solution I'd like to avoid, for responsiveness sake.

The app is actually using react and MUI, but I could adapt any HTML-CSS solution.

Answer 1

.container {
  margin: 50px;
  background: #fff url(https://i.ibb.co/x7SpXXZ/squares4.png) 12px 2px no-repeat;
  width: 160px;
  overflow: hidden;
}

.container input {
  letter-spacing: 20px;
  font-family: "Courier New", Courier, monospace;
  font-size: 150%;
  font-weight: bold;
  height: 30px;
  padding-left: 20px;
  padding-right: 20px;
  width: 160px;
  border: 0;
  background-color: transparent;
  outline: 0;
}

<div class="container">
  <input type="text" value="1234" maxlength="4">
</div>