项目需求，使用ng写一个密码框格子支付模块，一开始使用一个input+letter-spacing来分割字符，但是发现间距非常不好控制，随着字符的输入文本框字符串间距还会自动调整。最终从网上查找到一款jq仿支付宝密码输入框，于是我模仿编写了个指令模块。
效果如下：
完整代码如下：
使用ng仿写支付宝密码框 *{ margin: 0; padding: 0;} .t{ margin-left: 100px;} .pass-form{position:relative;top:20px; left: 50px; width:100%;} .pass-form .pass-input{position:absolute;top:0;height:75px;line-height:75px;font-size:14px;color:#000;opacity:0;box-shadow:none} .pass-form .pass-border-box{position:absolute;top:0;font-size:0} .pass-form .pass-border-box .faguang{position:absolute;top:0;left:0;z-index:9;box-shadow:0 0 8px rgba(60,100,100,.6);width:75px;height:75px;background:#fff;opacity:0} .pass-form .pass-border-box .pass-border{display:inline-block;position:relative;z-index:10;width:75px;height:75px;border:solid 1px #dcdcdc;border-left:none;-webkit-box-sizing:border-box;box-sizing:border-box} .pass-form .pass-border-box .pass-border:first-child{border-left:solid 1px #dcdcdc} .pass-form .pass-border-box .pass-border.active{background:url(../img/icons/icon_guangbiao.gif) no-repeat center center #fff} .pass-form .pass-border-box .pass-border i{display:block;margin:0 auto;margin-top:22px;width:20px;height:20px;border-radius:100%} ng仿写支付宝密码框
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
