可以在css边界底部属性中确定短划线的数量吗？

Question

我想要一个具有以下要求的输入文本框。

1. 固定尺寸​​。
2. 只有带有破折号的底部虚线边框等于大小。

我试过了：

<div>
    input text: <input size="5" maxlength="5"/>
</div>

here是我尝试过的小提琴。

是否可以使破折号的数量等于文本框的大小属性？
如果是，我该怎么办？

Answer 1

首先，不可能。每个浏览器都以不同的方式呈现虚线边框。

您可以使用变通方法。在下面的示例中，我添加了一个ul，它模拟了可以使用的字符数

＆＃13;

＆＃13;

input{
    border:none;
    border: 0px dashed;
    letter-spacing: 2px;
}

input:focus{
    outline:0
}

div{
    border: 2px solid #CCC;
    padding: 50px;
}


ul {
    position: relative;
    top: -35px;
    right: -30px;
    height: 1px;    
}

li {
    display: inline;
    margin: 0 2px;
    list-style-type: none;
    font-size: 8px;
}

＆＃13;

<div>
    input text: <input size="5" maxlength="5"/>
    <ul><li>_</li><li>_</li><li>_</li><li>_</li><li>_</li></ul>
</div>

＆＃13;

＆＃13;

＆＃13;