* { padding: 0px; margin: 0px; } .pwd-box{ width:310px; height: 48px; position: relative; border: 1px solid #9f9fa0; border-radius: 3px; overflow:hidden; margin: 10px auto; } .pwd-box input[type="number"]{ width: 100%; height: 100%; /*color: transparent; */ /*letter-spacing 属性增加或减少字符间的空白*/ /*letter-spacing: 35px;*/ position: absolute; top: 0; left: 0; border: none; font-size: 18px; opacity: 0; z-index: 1; outline: none; } .fake-box { width: 100%; height: 100%; display: flex; flex-flow: row; } .fake-box input{ flex: 1; width: 100%; height: 100%; border: none; border-right: 1px solid #e5e5e5; text-align: center; font-size: 30px; float: left; } .fake-box input:nth-last-child(1){ border:none; }
原理:
一个真正的可以输入的input框,opacity: 0,设定位层级;(视图不可见的,可以获取数据的)
再来6(n)个input,readyonly,用来显示,type为password,设置好样式;(视图可见的)