Question

我试图创建一个具有五行的输入，底部的虚线有点象虚线，但它必须全部包含在1个输入中。类似于当前密码笔所显示的内容。但是我想要没有字母的线。我尝试在标签上设置宽度，但是当我删除rext时，它仅显示1行。知道我该如何解决吗？

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">

具有重复线性梯度的标签

0 个答案: