html - 可以在 css border bottom 属性中确定破折号的数量吗？

Question

我想要一个符合以下要求的输入文本框。

1. 具有固定大小。
2. 仅底部虚线边框，虚线数量等于大小。

我试过:

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

here是我试过的 fiddle 。

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

Answer 1

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

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

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;
}

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