实现方法：1.先写好5个框 2.input输入框定位到5个框上并把背景颜色设为透明（transparent），3.input输入框中内容加上字间距（letter-spacing）来调整让输入框中的字符刚好在5个框中间。
最终效果：
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
/*清除浏览器默认样式*/
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.warp {
position: relative;
margin: 50px;
}
input {
position: absolute;
top: 0;
left: 0;
width: 210px;
height: 20px;
background: transparent;
border: none;
letter-spacing: 35px;
padding-left: 8px;
outline: none;
}
.box {
font-size: 0;
}
.box span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 20px;
border: 1px solid #eee;
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<div class="warp">
<input type="number" />
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var inputValue = document.querySelector("input");
//input.value长度大于5或等于5取前5位并让它失去焦距
inputValue.oninput = function() {
if(inputValue.value.length >= 5) {
inputValue.value = inputValue.value.slice(0, 5);
inputValue.blur();
}
}
</script>
</body>
</html>