如何使用数字格式化10个方框的输入文本

时间:2017-11-02 21:56:05

标签: html css input textfield masking

我需要一个输入文本框,最多可容纳10位数(如果小于10,则右对齐)输入应具有20px高度和200px宽度。 输入应该包含10个盒子(10px10px),当用户输入数字时,它必须每个盒子显示一位数。 我设法用背景模拟那些盒子

background-image: repeating-linear-gradient(90deg, black, black 1px, 
transparent 1px, transparent 20px);
background-position: 100%;

使用monospace font-family帮助但仍然无法使其外观和工作。 这有可能实现,你可以为我提供一些小的工作片段吗?

1 个答案:

答案 0 :(得分:0)

您是否正在制作序列号输入?您是否特别想要使用一个输入字段,还是考虑使用多个输入元素?如果你想使用多个输入,这里有一个很好的StackOverflow question and answer,描述了如何从一个输入自动前进到另一个输入。

或者您正在寻找别的东西吗?你可以提供更多的细节和你正在应用CSS的标记吗?