<!DOCTYPE html> <html> <head> <title>password intput demo</title> </head> <style type="text/css"> body{ margin:0px; background-color: white; font-family: 'PT Sans', Helvetica, Arial, sans-serif; text-align: center; color: #A6A6A6; } /*输入框样式，去掉背景阴影模仿原生应用的输入框*/ input{ width: 100%; height: 50px; border:none; padding-left:3px; font-size: 18px; } input:focus { outline: none; } /*显示\隐藏密码图片*/ img{ width: 40px; height: 25px; position: absolute; right: 0px; margin: 15px; } /*登录按钮*/ button{ width: 200px; height: 50px; margin-top: 25px; background: #1E90FF; border-radius: 10px; border:none; font-size: 18px; font-weight: 700; color: #fff; } button:hover { background: #79A84B; outline: 0; } /*输入框底部半透明横线*/ .input_block { border-bottom: 1px solid rgba(0,0,0,.1); } /*container*/ #page_container{ margin: 50px; } </style> <body> <div> <!--密码输入框--> <div> <img src="https://www.jb51.net/visible.png"> <input type="password" placeholder="Password"/> </div> <button>Login</button> </div> <script type="text/javascript"> // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制 var demoImg = document.getElementById("demo_img"); var demoInput = document.getElementById("demo_input"); //隐藏text block，显示password block function hideShowPsw(){ if (demoInput.type == "password") { demoInput.type = "text"; demo_img.src = "invisible.png"; }else { demoInput.type = "password"; demo_img.src = "https://www.jb51.net/visible.png"; } } </script> </body> </html>
附上图片：