html中如何输入数字,html - 如何使用css(数字输入)实现跟随

我正在尝试实现以下功能：

这是一个输入框，有4位数字，单击后，用户可以输入4位数字。

它是移动应用程序的一部分。

目前，我已经实现了：example，请注意由于某种原因，

outline: none;在我的应用程序中工作正常，但在此jsFiddle示例中不起作用。

我的问题是如何绘制3个分隔条并显示这些数字

刚好适合自己在其中的位置吗？

使用CSS可以实现吗？

下面是代码：

CSS：

.ui-corner-all-input {

-webkit-background-clip: padding;

background-clip: padding-box;

-webkit-border-radius: .6em /*{global-radii-blocks}*/;

border-radius: .6em /*{global-radii-blocks}*/;

width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;

margin-top: 24px;

}

.ui-shadow-around {

-moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;

-webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;

box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;

border: 1px #b6b6b6 solid;

}

*:not(input):not(textarea) {

-webkit-user-select: none;

-webkit-touch-callout: none;

}

FORM[data-enhance="false"] INPUT, textarea {

outline: none;

}

FORM[data-enhance="false"] SPAN {

overflow: hidden;

display: block;

padding: 0 10px 0 0px;

text-align: left;

}

.submitHidden {

visiblity: hidden;

position: absolute;

opacity: 0;

}

最佳答案

您可以这样做：

HTML：

CSS：

.clock {

color:darkgray;

border-style:none;

width:40px;

height:60px;

font-size:60px;

}

td{

border:2px solid darkgray

}

table {

border-collapse:collapse;

}

JavaScript：

function next(next) {

document.getElementById(next).focus();

}

链接：http://jsbin.com/uhaHunuq/1/edit?html,output