话不多说上先图片
最终效果背景请按照自己的来
这是html部分
这是css部分
<style lang="less" >
.security-code-container {
// flex-direction: row-reverse;
margin:0;
padding:20px 0;
display:flex;
justify-content:center;
.field-wrap {
flex-direction:row-reverse;
list-style:none;
display:block;
border:1px solid #66ffff;
// border: 1px solid #eee;
height:4.4vh;
width:2.06vw;
font-size:18px;
text-align:center;
overflow:hidden;
// background-color: #fff;
margin-right:5px;
.char-field {
flex-direction:row-reverse;
font-style:normal;
}
&.on {
border:1px solid #0e88ef;
}
}
}
.input-code {
width:100%;
height:30px;
position:absolute;
left: -999999999999px;
opacity:0;
z-index: -1;
}
.clean {
width:100%;
box-sizing:border-box;
text-align:right;
color:#0e88ef;
font-size:12px;
padding:0 10px;
}
