隐藏input的小眼睛的方法

最新推荐文章于 2023-03-09 16:54:34 发布

dsus ch

最新推荐文章于 2023-03-09 16:54:34 发布

阅读量1.8k

点赞数 5

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_63953314/article/details/126322259

版权

在实际开发中，我们往往需要自己的隐藏与显示密码的按钮，那么自带的小眼睛就有些多余了。

如下面代码，自带的隐藏与显示开关就会与自己写的按钮冲突，极不美观。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示与隐藏密码</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        input {
            outline: none;
            width: 370px;
            border: 0;
            height: 30px;
        }

        img {
            position: absolute;
            right: 12px;
            top: 2px;
            width: 26px;
        }

    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="图片/眼睛_闭.png" alt="" id="button">
        </label>
        <input type="password" id="scanf">
    </div>
    <script>
        let bt = document.getElementById('button')
        let sf = document.getElementById('scanf')
        let flag = true
        bt.onclick = function () {
            if (flag) {
                sf.type = 'title'
                bt.src = "图片/眼睛_开.png"
                flag = false
            } else {
                sf.type = 'password'
                bt.src = "图片/眼睛_闭.png"
                flag = true
            }
        }
    </script>
</body>

</html>

在这里插入图片描述
解决方法：
隐藏伪元素::-ms-reveal

        input[type="password"]::-ms-reveal {
            display: none
        }

在这里插入图片描述
关于这个伪元素更具体的信息

https://cloud.tencent.com/developer/section/1072327

dsus ch

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
隐藏input的小眼睛的方法

隐藏input的小眼睛
复制链接

扫一扫

隐藏input的小眼睛的方法

“相关推荐”对你有帮助么？