Tue Jun 21 2022

Show Hide Password

CSS5401 views
File Name: show-hide-password.html

<!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>Show Hide Button for Password Field</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
        }

        body {
            background-color: #383838;
        }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        input[type=password],
        input[type=text] {
            padding: 6px 15px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
        }   
        
        .inputArea {
            position: relative;
        }

        .inputArea a#toggleEye {
            position: absolute;
            top: 6px;
            right: 15px;
            cursor: pointer;
        }

        .inputArea a#toggleEye svg {
            width: 20px;
            height: 20px;
        }

        .inputArea a#toggleEye svg path {
            fill: #282828;
        }

        .inputArea a#toggleEye.hide svg.show,
        .inputArea a#toggleEye svg.hide {
            display: none;
        }

        .inputArea a#toggleEye.hide svg.hide,
        .inputArea a#toggleEye svg.show {
            display: block;
        }
    </style>
    <script>
        function togglePassword() {
            let input = document.getElementById("password");
            let eyeIco = document.getElementById("toggleEye");

            if(input.type === 'password') {
                input.type = 'text';
                eyeIco.classList.add('hide');
            } else {
                input.type = 'password';
                eyeIco.classList.remove('hide');
            }
            
        }
    </script>
</head>
<body>
    <section>
        <form action="">
            <div class="inputArea">
                <input type="password" name="" id="password" placeholder="Password" />
                <a onclick="togglePassword()" id="toggleEye">
                    <svg class="hide" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497.301 497.301" style="enable-background:new 0 0 497.301 497.301;" xml:space="preserve">
                        <g>
                            <path d="M97.5,342.351C30.6,302.15,0,248.65,0,248.65s76.5-133.9,248.6-133.9c24.9,0,47.8,1.9,68.8,7.6l-15.301,15.3
                                c-17.199-1.9-34.4-3.8-53.5-3.8c-153,0-225.7,114.8-225.7,114.8s28.7,45.9,88,80.3L97.5,342.351z M172.1,248.65
                                c0,5.7,0,11.5,1.9,17.2l17.2-17.2c0-15.3,5.7-28.7,17.2-40.2s26.8-17.2,40.2-17.2l17.201-17.2c-5.701-1.9-11.5-1.9-17.201-1.9
                                C206.5,172.15,172.1,206.55,172.1,248.65z M399.699,154.95l-13.398,13.4c59.299,34.4,88,80.3,88,80.3S401.6,363.45,248.6,363.45
                                c-19.1,0-36.3-1.899-53.5-3.8l-15.3,15.3c21,5.7,44,7.601,68.9,7.601c172.101,0,248.601-133.9,248.601-133.9
                                S466.6,195.15,399.699,154.95z M401.4,76.95L76.9,401.45l18.9,18.9l324.6-324.6L401.4,76.95z M288.801,288.851
                                c-11.5,11.5-24.9,17.2-40.201,17.2l-17.2,17.199c5.7,1.9,11.5,1.9,17.2,1.9c42.099,0,76.5-34.4,76.5-76.5c0-5.7,0-11.5-1.9-17.2
                                L306,248.65C306,263.95,300.199,277.351,288.801,288.851z"/>
                        </g>
                    </svg>
                    <svg class="show" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497.25 497.25" style="enable-background:new 0 0 497.25 497.25;" xml:space="preserve">
                        <g>
                            <g>
                                <circle cx="248.625" cy="248.625" r="19.125"/>
                                <path d="M248.625,172.125c-42.075,0-76.5,34.425-76.5,76.5s34.425,76.5,76.5,76.5s76.5-34.425,76.5-76.5
                                    S290.7,172.125,248.625,172.125z M248.625,306c-32.513,0-57.375-24.862-57.375-57.375s24.862-57.375,57.375-57.375
                                    S306,216.112,306,248.625S281.138,306,248.625,306z"/>
                                <path d="M248.625,114.75C76.5,114.75,0,248.625,0,248.625S76.5,382.5,248.625,382.5S497.25,248.625,497.25,248.625
                                    S420.75,114.75,248.625,114.75z M248.625,363.375c-153,0-225.675-114.75-225.675-114.75s72.675-114.75,225.675-114.75
                                    S474.3,248.625,474.3,248.625S401.625,363.375,248.625,363.375z"/>
                            </g>
                        </g>
                    </svg>
                </a>
            </div>
        </form>
    </section>
</body>
</html>
Result Screenshot(s)

Author:Geekboots