Show/Hide Password Toggle With Javascript

Show/Hide Password toggle is provided along with the password input field so the user can verify and ensure the typed in password is mistake-free. The user can toggle the visibility of the password field back to hidden so he/she can enter the password securely again. These toggles help in reducing the number of errors made by the user while filling a form. It saves the user a lot of time and makes the process of form-filling much easier.

In today’s tutorial, we create a show/hide toggle for the password field. The button with an ‘eye’ icon acts as a toggle to switch between masked and unmasked password states. For this project, you need basic HTML, CSS, and some easy-peasy Javascript. Let us dive into the coding.

HTML

To begin with, we create a div with the class name wrapper. The purpose of this div is to center and contain the password field along with the toggle button. Next, we add an input element of type password. The difference between text input and password input is that the characters are masked in the input field by replacing them with ‘•’ or ‘*’ symbols.

Lastly, we finish the HTML code by adding a span element containing the eye icon. I have used font awesome icons. But you can use any icon you prefer. Material Icons by Google is another excellent choice.

<div class="wrapper">
    <input type="Password" placeholder="Password" id="password">
    <span>
        <i class="fa fa-eye" id="eye" onclick="toggle()">
        </i>
    </span>
</div>

CSS

body{
    background-color: #5887ef;
    padding: 0;
    margin: 0;
}

Centering the Wrapper:

To center the wrapper div, we position it absolutely. We now set the width for wrapper as 300 pixels.

.wrapper{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    width: 300px;
}

Customizing the Input field:

Next, we target the password field using the input selector. To include padding and borders in total width/height of an element, we make use of the box-sizing property. The value of box-sizing is set to ‘border-box’. We use a 100 percent width of the wrapper div for the input field. We then add some box-shadow to give the password field some depth. The font I have used here is ‘Poppins’.

input{
    box-sizing: border-box;
    width: 100%;
    font-size: 18px;
    border: none;
    padding: 10px 10px;
    border-radius: 3px;
    font-family: 'Poppins',sans-serif;
    color: #4a4a4a;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 30px rgba(22,89,233,0.4);
}

Targetting and Styling Placeholder:

To select and style the placeholder using the ‘::placeholder’ selector. We set the color of placeholder to be much lighter than the color of the field.

::placeholder{
    color: #9a9a9a;
    font-weight: 400;
}

Styling The Eye icon:

For the next step, we position the span element towards the right side of the wrapper. To indicate that the span containing icon is clickable, we set the value of cursor attribute to ‘pointer’. Lastly, we set the color and size of the eye icon.

span{
    position: absolute;
    right: 15px;
    transform: translate(0,-50%);
    top: 50%;
    cursor: pointer;
}
.fa{
    font-size: 20px;
    color: #7a797e;
}

Javascript

var state= false;
function toggle(){
    if(state){
	document.getElementById("password").setAttribute("type","password");
	document.getElementById("eye").style.color='#7a797e';
	state = false;
     }
     else{
	document.getElementById("password").setAttribute("type","text");
	document.getElementById("eye").style.color='#5887ef';
	state = true;
     }
}

I would love to hear your suggestions and feedbacks, so feel free to drop them in the comment box below. Stay tuned for more fun tutorials. Please support me by following me on Instagram or by subscribing to my Youtube Channel.