Enhance Web Interactivity: Toggle Password Visibility using JavaScript

Explore the art of enhancing user experience by implementing a password visibility toggle feature in your web forms. In this guide, we'll dissect the HTML and CSS code that brings this functionality to life. From the sleek underline animation to the dynamic label transitions, every detail will be uncovered.

Also Read: Interactive Bottom Menu Navigation using HTML CSS and JS

HTML Structure

Let's kick off our exploration by dissecting the HTML structure that forms the backbone of our password visibility toggle. The code snippet reveals a well-thought-out arrangement of elements, each playing a crucial role in achieving the desired functionality.

 <div class="main-container">
    <div class="field">
        <input type="password" id="password" required>
        <label for="password">Password</label>
        <span class="far fa-eye"></span>
        <div class="underline"></div>
    </div>
</div>

• Field Container (.field): Acts as a container for the password input, label, visibility toggle icon, and the underline element. Manages the overall styling and positioning of these components.
• Password Input (#password): Utilizes the type="password" attribute to ensure the input is rendered as a password field. Includes the required attribute for basic form validation.
• Label (label): Associated with the password input using the for attribute. Initially positioned at the bottom of the input.
• Visibility Toggle Icon (.far.fa-eye): Represents an eye icon that toggles between visibility and hidden states. Initially positioned at the bottom right of the input, hidden and transparent.
• Underline (div.underline): Serves as a dynamic underline beneath the password input. Initially hidden and expanded dynamically when the input is focused.

Now that we've established the foundation with our HTML structure, let's delve into the CSS styling that transforms a plain form field into an interactive and visually appealing password input. Every detail, from positioning to transitions, contributes to the overall aesthetics and functionality.

CSS Styling

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css');

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width: 350px;
    font-family: 'calibri';
}

.field {
    width: 300px;
    position: relative;
    color: rgb(220, 220, 220);
    caret-color: white;
}

#password {
    width: 100%;
    outline: none;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.566);
    padding: 10px 25px 10px 0px;
    color: #fff;
    height: 35px;
}

label {
    position: absolute;
    left: 0;
    bottom: 10px;
    transition: .3s;
    z-index: -1;
}

.far {
    position: absolute;
    bottom: 10px;
    right: 0;
    cursor: pointer;
    opacity: 0;
    transition: .3s;
    width: 30px;
    text-align: center;
    visibility: hidden;
}

.underline {
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    background: rgb(163, 255, 178);
    transform: scaleX(0);
    transition: .3s;
    border-radius: 10px;
}

input:focus~.underline {
    transform: scaleX(1);
}

input:focus~label,
input:valid~label {
    bottom: 35px;
    font-size: 15px;
}

.field input[type='text'] {
    font-size: 16px;
}

input:valid~.far {
    opacity: 1;
    visibility: visible;
}

input:focus~.underline {
    animation: underlineAnimate 2s infinite alternate;
}

@keyframes underlineAnimate {
    to {
        filter: hue-rotate(360deg);
    }
}

• Field Container Styling (.field): Defines the width, positioning, and color properties for the field container. Sets the caret color to white for improved visibility.
• Password Input Styling (#password): Removes default styling for the input. Creates a border-bottom for a stylish underline effect. Adjusts padding and color properties for better aesthetics.
• Label Styling (label): Initially positioned at the bottom of the input. Transitions smoothly when the input is focused or has content.
• Visibility Toggle Icon Styling (.far): Initially hidden and transparent. Becomes visible and opaque when the input is valid. Positioned at the bottom right of the input.
• Underline Styling (.underline): Positioned beneath the input. Dynamically expands when the input is focused. Utilizes a smooth transition and a subtle border-radius for elegance.
• Input Animation (underlineAnimate): Applies a hue-rotate animation to the underline for a captivating effect.

The CSS styles work harmoniously to bring a sleek and user-friendly appearance to our password visibility toggle.

JavaScript Functionality

The magic doesn't stop with just looks – our password visibility toggle wouldn't be complete without its dynamic functionality. This is where JavaScript enters the scene, bringing the toggle feature to life.

Also Read: Typing Text Effect using HTML CSS and JS

Let's dive into the JavaScript code and understand how it seamlessly works with the HTML and CSS to create an interactive user experience.

const input = document.querySelector('#password');
const eye = document.querySelector('.far');

function toggle() {
    eye.classList.toggle('fa-eye-slash');
    eye.classList.toggle('fa-eye');
    input.type = (input.type === 'password') ? 'text' : 'password';
}

eye.addEventListener('click', toggle); 

When the eye icon is clicked, the toggle function is executed. The fa-eye and fa-eye-slash classes on the eye icon are toggled, changing its appearance. Simultaneously, the input type toggles between text and password, revealing or hiding the password.

This JavaScript code seamlessly integrates with our HTML and CSS, ensuring that our password visibility toggle not only looks good but also functions smoothly.

Empower yourself with customization tips to tailor this password input design to match your project's unique style. Adjust font sizes, colors and animations to create a seamless integration with your overall design language.

Wrap up your journey with a comprehensive understanding of creating a password visibility toggle using HTML, CSS, and JavaScript. Empower your web forms with this intuitive feature, striking a perfect balance between security and user convenience.

Download