-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
46 lines (44 loc) · 2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿支付宝密码输入框</title>
</head>
<style>
.box{width: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.box-items {-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center;}
.flex-1{display: block;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;width: 0;-webkit-flex-basis: 0;-ms-flex-preferred-size: 0;flex-basis: 0;}
.pwd-control {padding: 1rem 0 2.5rem;text-align: center;width: 250px}
.pwd-control .item {margin: 0 0.1rem;position: relative;}
.pwd-control .item.circle:after {content: "";width: 8px;height: 8px;background: #000;border-radius: 50%;position: absolute;top: 50%;left: 50%;margin-top: -4px;margin-left: -4px;}
.pwd-control .normal input {color: #000;}
.pwd-control input {display: block;width: inherit;border-radius: 3px;text-align: center;border: 1px solid #c79f62;width: 100%;color: #fff;line-height: 35px}
.pwd-control input:focus {box-shadow: 0px 0px 20px #c79f62;}
.pwd-control .box {padding: 0.5rem;}
</style>
<body>
<div class="pwd-control" id="payPwd">
<div class="box">
<div class="flex-1 item"><input maxlength="1" type="tel"></div>
<div class="flex-1 item"><input maxlength="1" type="tel"></div>
<div class="flex-1 item"><input maxlength="1" type="tel"></div>
<div class="flex-1 item"><input maxlength="1" type="tel"></div>
<div class="flex-1 item"><input maxlength="1" type="tel"></div>
<div class="flex-1 item"><input maxlength="1" type="tel"></div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="payPwd.js"></script>
<script type="text/javascript">
$(function(){
$("#payPwd").payPwd({
max:6,
type:"password",
callback:function(arr) {
console.log(arr)
}
})
})
</script>
</body>
</html>