js模擬支付密碼輸入
阿新 • • 發佈:2019-01-27
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; }