6位数密码输入框

Posted 2020-09-29 乐少007

 

6位数密码输入框

不管是PC端还是移动端，经常会有这样的，密码输入框

这里采取。6个li占位，上面覆盖一个 input输入框 

<article class="pwd-area">
　　<input type="tel" id="password-input" maxlength="6">
　　　　<ul id="password-list">
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　</ul>
</article>

 

=============================================

/*【header*/

.header {
width: 100%;
height: 4.4rem;
line-height: 4.4rem;
position: relative;
background: url(../images/header-bottom-bg.png) repeat-x bottom right #378FE6;
}

.header h4 {
font-size: 1.8rem;
color: #EDEDED;
text-align: center;
margin: 0;
line-height: inherit;
letter-spacing: 2px;
}

.header>a {
text-indent: -9999px;
overflow: hidden;
}

.header>a:before {
content: \' \';
position: absolute;
top: 35%;
left: 15px;
width: 15px;
height: 15px;
border: #FFFFFF solid;
border-width: 2px 2px 0 0;
-webkit-transform: rotate(-135deg);
}

/*header】*/

/*【password*/

.paw-title {
color: #272727;
font-size: 1.4rem;
margin: 2rem auto;
width: 100%;
text-align: center;
}

.pwd-area {
position: relative;
width: 80%;
margin: 0 auto;
}

#password-input {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
border: none;
background: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
font-size: 1px;
}

#password-list {
width: 100%;
display: -webkit-box;
}

#password-list li {
-webkit-box-flex: 1;
width: 16.66%;
padding: 8.33% 0;
border: 1px solid #ABABAB;
margin-left: -1px;
text-align: center;
line-height: 0;
font-size: 36px;
list-style: none;
}

.forget-pwd {
color: #378FE6;
font-size: 1.2rem;
float: right;
margin: 2rem 1.5rem;
text-decoration: underline;
letter-spacing: 1px;
}

.popup {
display: none;
color: #FFFFFF;
font-size: 1.4rem;
text-align: center;
background: #404040;
-moz-border-radius: 8px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 3rem auto 0;
opacity: 0.9;
filter: Alpha(opacity=90);
}

.popup-error {
width: 14rem;
height: 4rem;
line-height: 4rem;
}

.popup-success {
width: 10.5rem;
height: 10.5rem;
line-height: 10.5rem;
background: url(../images/checked-blue.png) no-repeat center 35% #404040;
background-size:30px 30px ;
padding: 2rem 0;
}

/*passsword】*/

 

=======================================

详情可见附件文件夹 http://files.cnblogs.com/files/leshao/6%E4%BD%8D%E6%95%B0%E5%AF%86%E7%A0%81.rar