支付宝控件密码框html5,html5仿支付宝密码框的实现代码

废话不多说了，直接给大家贴代码了，具体代码所示：

仿支付宝密码框-移动端测

*{

margin: 0;

padding: 0;

}

body {

padding: 50px;

}

.clearfix:after {

clear: both;

}

.clearfix:before,

.clearfix:after {

content: " ";

display: table;

}

.alieditContainer {

position: relative;

}

.sixDigitPassword {

position: absolute;

left: -222px;

top: 0;

width: 1000px;

height: 26px;

color: #fff;

font-size: 12px;

-webkit-box-sizing: content-box;

box-sizing: content-box;

-webkit-user-select: initial;

outline: 'none';

z-index: 999;

opacity: 0;

filter: alpha(opacity=0);

}

.sixDigitPassword-box {

cursor: text;

background: #fff;

outline: none;

position: relative;

padding: 8px 0;

height: 15px;

border: 1px solid #cccccc;

border-radius: 2px;

}

.sixDigitPassword-box i {

float: left;

display: block;

padding: 4px 0;

height: 7px;

border-left: 1px solid #cccccc;

}

.sixDigitPassword-box .active {

background: url('password-blink.gif') no-repeat center center;

}

.sixDigitPassword-box b {

display: block;

margin: 0 auto;

width: 7px;

height: 7px;

overflow: hidden;

visibility: hidden;

background: url('passeord-dot.png') no-repeat;

}

.sixDigitPassword-box span {

position: absolute;

display: block;

left: 0px;

top: 0px;

height: 30px;

border: 1px solid rgba(82, 168, 236, .8);

border: 1px solid #00ffff9;

border-radius: 2px;

visibility: hidden;

-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);

}

.ui-securitycore .ui-form-item .ui-form-explain {

margin-top: 8px;

}

.i-block {

display: inline-block;

}

.six-password {

position: relative;

height: 33px;

width: 182px;

overflow: hidden;

vertical-align: middle;

}

}

支付密码：