密码显示与隐藏效果 html+css+js闭眼样式

最新推荐文章于 2024-03-12 16:58:51 发布

小屁孩大帅-杨一凡

最新推荐文章于 2024-03-12 16:58:51 发布

阅读量750

点赞数

分类专栏：常见命令文章标签： java

本文链接：https://blog.csdn.net/weixin_41722928/article/details/123921886

版权

常见命令专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .kuang{
            position: relative;
            width: 380px;
            height: 60px;
            border-radius: 5px;
           /*  background-color: rgba(204, 197, 197,.5); */
            box-shadow: inset 5px 5px 10px rgba(204, 197, 197,.5),
                        inset -5px -5px 8px rgba(204, 197, 197,.5);
        }
        .kuang input{
            position: absolute;
            top: 0;
            left: 20px;
            height: 100%;
            width: 300px;
            font-size: 18px;
            outline: none;
            border: none;
            background-color:transparent;
        }
        .kuang input::placeholder{
            color: rgba(68, 67, 67,.8);
        }
        .conceal{
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-image: url(biyan.png);
            background-size: 100% 100%;   
            cursor: pointer;
        }
        .conceal.yincang{
            background-image: url(biyan.png);
            background-size: 100% 100%; 
        }
    </style>
</head>
<body>
   <div class="kuang">
       <input type="password" placeholder=" 请输入密码......" id='password' > 
       <div class="conceal" id='conceal'></div>
   </div>
   <script>
       var password = document.getElementById('password');
       var anniu = document.getElementById('conceal');
       anniu.addEventListener('click',function(){
           if(password.type==='password')
           {
               password.setAttribute('type','text');
               anniu.classList.add('yincang');
           }else{
            password.setAttribute('type','password');
               anniu.classList.remove('yincang');
           }
       })
   </script>
</body>
</html>