我尝试拆分输入字段,使其如下所示:
但是我被困住了,我没有找到任何对我有帮助的东西。我找到了类似的东西,但不是我想要的:
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" />
唯一的要求是只使用HTML和CSS。如果有人能帮助我,我将不胜感激。谢谢!
发布于 2018-07-06 09:15:45
通过对background
、letter-spacing
和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" />
https://stackoverflow.com/questions/51201626
复制相似问题