Label with repeating-linear-gradient

Question

I am trying to create an input that has five lines, kind of a dashed bottom border but it needs to all be in 1 input. Something similar to what the codepen is showing at the moment. However I want the lines without the letters on them. I've tried to set a width on the label but when I remove the rext it only displays 1 line. Any idea how I can fix this?

https://codepen.io/naomilea/pen/bKymWw

label{
background-image: linear-gradient(
    to right,
    #02ADD7,
    #02ADD7 1.5ch,
    transparent 1.5ch,
    transparent 2ch,
    #02ADD7 2ch,
    #02ADD7 3.5ch,
    transparent 3.5ch,
    transparent 4ch,
    #02ADD7 4ch,
    #02ADD7 5.5ch,
    transparent 5.5ch,
    transparent 6ch,
    #02ADD7 6ch,
    #02ADD7 7.5ch,
    transparent 7.5ch,
    transparent 8ch,
    #02ADD7 8ch,
    #02ADD7 9.5ch,
    transparent 9.5ch
  );
  background-size: 10ch 0.25ch;
  background-repeat: no-repeat;
  background-position: calc(1em - 0.25ch) 2.25em;
  font-family: monospace;
  padding: 1em 0.5em 1em 1em;
  font-size: 36px;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1ch;
  font-size:36px;
}

<label for="zip">HELLO</label>
<input type="text" id="zip">