html - Making a custom input text type

Question

I want to make this

but I don't know how to make the squares and how to set that in one square only one letter can be entered. So far I wrote this, but I really don't know how to continue.

.input {
  width: 200px;
  border: 1px solid black;
}

<label><b>CNP</b></label>
<input class="input" type="text" name="CNP">

Answer 1

UPDATE : Thanks to the comments of @Danield I updated with more appropriate unit.

You can use linear-gradient BUT you need to pay attention to different sizes and to the font-family if you want to have one letter inside one slot:

.input {
  /* each letter will take 1ch + 1px and we remove 1px of the last one*/
  width: calc(15 * (1ch + 1px) - 1px);
  border: 1px solid black;
  background: 
  /* 1ch space for the letter + 1px border */
  repeating-linear-gradient(to right, #fff, #fff 1ch, #000 1ch, #000 calc(1ch + 1px));
  font-size: 29px;
  /*since a letter will take 1ch we add 1px to cover the border*/
  letter-spacing: 1px; 
  /*we use a monospace font-family so all the letter will take the same width = 1ch*/
  font-family: monospace;
}

<input class="input" type="text" maxlength="15" name="CNP">
<p>This will work with any font-size</p>
<input class="input" type="text" maxlength="15" name="CNP" style="font-size:35px;">