1. 程式人生 > >js模擬支付密碼輸入

js模擬支付密碼輸入

 body{
            background: #fff;
            font-size:0.7rem;
        }
        input{
            color:transparent;
            text-shadow:0 0 0 #000;
            font-size:1rem;
        }
        .rec_in_container{
            padding:0 1.25rem;
        }
        .rec_in_container p{
            margin:1.5rem 0;
            color: #999;
        }
        .rec_in_show{
            position: relative;
        }
        .rec_in_input{
            height: 2.35rem;
            width: 200%;
            position: absolute;
            top:0;
            left:0;
            z-index: 1;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            opacity:0;
            margin-left: -100%;
            color:transparent;
            text-shadow:0 0 0 #000;
        }
        .rec_in_pw{
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
            -webkit-box-pack: space-between;
            -moz-justify-content: space-between;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }
        .rec_in_pw div{
            width: 2.35rem;
            height:2.35rem;
            background: #f0f0f0;
            padding: 0;
            text-align: center;
            position: relative;
        }
        .rec_in_pw div i{
            display: inline-block;
            width: .4rem;
            height:.4rem;
            position: absolute;
            top:0;
            right:0;
            left: 0;
            bottom: 0;
            margin: auto;
            background: #000;
            border-radius: 50%;
            display: none;
        }
        .rec_in_submit{
            text-align: center;
            margin-top:2rem;
        }
        .rec_in_submit span{
            display: inline-block;
            width: 14.05rem;
            height:2.2rem;
            background: #ff9a96;
            color: #fff;
            font-size:.9rem;
            line-height: 2.4rem;
            border-radius: .2rem;
        }
Js程式碼: