Method: 1. first written 2.input input box frame 5 positioned on the frame 5 and the background color is set to clear (transparent), 3.input content plus input box character pitch (letter-spacing) to adjust so that character input box just between 5 box.
final effect:
All codes
<!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> //input.value length greater than or equal to 5 5 and 5 to take before it lost the focal length
document.querySelector for inputValue = var ( "INPUT");
inputValue.oninput = function() {
if(inputValue.value.length >= 5) {
inputValue.value = inputValue.value.slice(0, 5);
inputValue.blur();
}
}
</script>
</body>
</html>