* {
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,设置好样式;(视图可见的)