Single-digit inputs with one element (OTP)

May 14, 2024

Turn a simple input into single-digit inputs using a few lines of CSS. Useful for One-Time Password fields.

No extra element (only the <input> element)
Less than 15 CSS declarations
Optimized with CSS variables

CSS-only One-Time Password field

input[type=text] {
  --w: 1ch;   /* control the width for each letter */
  --g: .15em; /* the gap between letters */
  --b: 2px;   /* the border thickness */
  --n: 6;     /* the number of letters */
  
  --c: #888;
  line-height: 1.5; /* control the height */
  letter-spacing: var(--w);
  font-family: monospace;
  width: calc(var(--n)*(1ch + var(--w)));
  padding-left: calc((var(--w) - var(--g))/2);
  clip-path: inset(0 calc(var(--w)/2) 0 0);
  background:
    repeating-linear-gradient(90deg,
      var(--c) 0 var(--b),#0000 0 calc(1ch + var(--w) - var(--g) - var(--b)),
      var(--c) 0 calc(1ch + var(--w) - var(--g)),#0000 0 2ch),
    conic-gradient(at calc(100% - var(--g) - 1px) var(--b),#0000 75%,var(--c) 0) 
     0 0/calc(1ch + var(--w)) calc(100% - var(--b));
}

See the Pen Single digit inputs with one element by Temani Afif (@t_afif) on CodePen.