CODEWITHSUNDEEP
htmlcssinputsplit
Laurentiu Tibea
Laurentiu Tibea

Reputation: 67

HTML & CSS Split input form - char by char

I try to split input field to make something like this:

enter image description here

But I'm stuck and I didn't found anything that help me. I find something similar but isn't what I want:

input[type="text"] {
  border: none;
  width: 400px;
  background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/52% 2px no-repeat;
  color: dimgrey;
  font-family: monospace;
  letter-spacing: .5ch;
}

input:focus {
  outline: none;
  color: dodgerblue;
}
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="20" />

The only requirement is to use only HTML and CSS. I would appreciate very much if someone could help me. Thanks!

Upvotes: 4

Views: 7099

Answers (1)

mike.k
mike.k

Reputation: 3457

I got it to look closer with these changes to background, letter-spacing, and padding-left:

input[type="text"] {
  border: solid 1px dimgrey;
  width: 400px;
  background: repeating-linear-gradient(90deg, #ffffff 0px, #ffffff 19px, #000000 20px);
  color: dimgrey;
  font-family: monospace;
  letter-spacing: 1.75ch;
  padding-left: 0.8ch;
}

input:focus {
  outline: none;
  color: dodgerblue;
}
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="20" />

Upvotes: 5

Related Questions