首先要说明原理:
1.input:text框让他层级最高,这边要设置透明度,这样保证遮盖的盒子操作的box-shadow能看的到,让文字的color设为背景色一致,这里设置为白色,在这样就看不到默认的字了
2.然后是给一个盒子来存放输入的框,就是6个虚拟的密码框,来显示你输入的个数
3.每个密码框里面另外存放一个小盒子,背景色为黑色,border-radus设为50%,令其为圆形,模拟输入的密码
这边的意思大概这样,其他需要通过js来操作效果
全部代码奉上(本文参考http://www.qdfuns.com/notes/13457/2212f3d3af79179f3275dc5b7c0282e3.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin: 0; padding:0; } .paycontainer{ margin: 20px 100px; background-color: pink; position: relative; } .paypasswordcontainer{ width: 300px; height: 46px; font-size: 12px; position: absolute; color: #ffffff; z-index:9; opacity:0.2; -webkit-user-select: initial; /*取消禁用选择页面元素*/ background-color: #ffffff; outline:none; } .sixpassword{ width: 300px; height: 22px; position: absolute; top:1px; left:1px; padding:13px 0; cursor: text; background: #fff; border-radius: 5px; } .sixpassword i{ display: inline-block; width: 49px; height: 22px; border-left: 1px solid #cccccc; float: left; } .sixpassword i:first-child{ border-left:0; } .sixpassword i.active{ background: url("https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif") no-repeat 60% center; } .sixpassword b{ width: 7px; height: 7px; background-color: #000; display: block; margin: 7px auto; display: none; border-radius: 50%; } .guanbiao{ width: 48px; height: 46px; display: block; position: absolute; display: block; left: 0px; top: 0px; border: 1px solid #00ffff; border-radius: 5px; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) ; } </style> <body> <div class="paycontainer"> <input type="password" minlength="6" maxlength="6" class="paypasswordcontainer" oncontextmenu="return false" onpaste="return false" oncopy="return false" oncut="return false" autocomplete="off"> <div class="sixpassword"> <i class="active"><b></b></i> <i><b></b></i> <i><b></b></i> <i><b></b></i> <i><b></b></i> <i><b></b></i> <span class="guanbiao"></span> </div> </div> <p></p> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ $(".paypasswordcontainer").keyup(function(){ $input_val=$(this).val(); $input=$input_val.length; for (var x = 0; x <= 6; x++) { $("p").html($input); if ($input == 0) { $(".sixpassword").find("i").eq(0).addClass("active").siblings("i").removeClass("active"); $(".sixpassword").find("b").css({"display": "none"}); $(".guangbiao").css({"left": 0}); } else if ($input == 6) { $(".sixpassword").find("b").css({"display": "block"}); $(".sixpassword").find("i").eq(5).addClass("active").siblings("i").removeClass("active"); $(".guangbiao").css({"left": 5 * 50}); }else{ $(".sixpassword").find("i").eq($input).addClass("active").siblings("i").removeClass("active"); $(".sixpassword").find("i").eq($input).prevAll("i").find("b").css({"display":"block"}); $(".sixpassword").find("i").eq($input).nextAll("i").find("b").css({"display":"none"}); $(".guanbiao").css("left",$input*50); } } }) }) </script> </html>
oncontextmenu="return false" onpaste="return false" oncopy="return false" oncut="return false" //此处是禁止密码复制粘贴的
autocomplete="off"//让浏览器不自动记录之前输入的值,很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到
在写的时候遇到一个问题怎么也搞不定,朋友一句话就把我点醒了"行内块默认有间距",这个是格式化不了的,只能通过浮动解决