Show/Hide Password Eye Icon With HTML And JavaScript

Table of Contents

Toggle

Create Show/Hide Password In Html and JavaScript With Eye Icon

 

Hello Coder,Welcome to the Codewithrandom blog. In this blog, We learn how to create Show Hide a Password With an Eye Icon with Html Code. We use HTML, CSS, and JavaScript for this Show and Hide Password With Eye Icon. We have an input field with a password tag and an eye icon for showing or hiding passwords in the input field using JavaScript.

Before we start with our project, we need to understand some of the general concepts of show/hide passwords.

What is a Show/Hide Password?

A show and hide password is a javascript feature that helps users keep their privacy by adding toggle icons that add and remove the password class to display and hide passwords. This helps in maintaining user privacy in public and keeping the data safe.

I hope you enjoy our blog so let’s start with a basic html structure for a Show and Hide Password With an Eye Icon.

50+ HTML, CSS & JavaScript Projects With Source Code

Show Password In Html With Eye Icon:-

Create your Html file first, then paste this code into the html head area or add the Font Awesome CDN link to it. We need font awesome CDN in order for the eye icon in input to display conceal the password.

CDN link with Link Tag:-

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Show/hide Password Eye Icon Html Code:-

<div class="password-field">
<input type="password" id="fakePassword" placeholder="Enter Password" />
<span><i id="toggler"class="far fa-eye"></i></span>
</div>

 

 

CSS Code:-

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
flex-direction: column;
}
body .password-field {
position: relative;
}
body .password-field input {
width: 30rem;
height: 4em;
padding: 1em;
border: 0;
border-radius: 10px;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
font-size: 1rem;
letter-spacing: 1px;
}
body .password-field input::placeholder {
color: #000;
font-weight: bold;
}
body .password-field #toggler {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

Step1:We will change the padding and margin to “zero” using the universal tag selector (*), and we will set the box size to border-box using the box-sizing property.

Now that we have selected the body element, we will set the width to “100%” of the body, the display property to “flex,” the align item property to “centre,” the font-color property to “white,” and the display property to “flex.” We will also align all of the text using these properties.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    flex-direction: column;
}

Step2:The input area will now have styling added. Using the class selector, we will choose the input field. Then, using the width and height properties, we will fix the width to “30 rem” and the height to “4 em,” respectively. Additionally, we’ll change the border radius to “30 px” using the border-radius property.

body .password-field input {
    width: 30rem;
    height: 4em;
    padding: 1em;
    border: 0;
    border-radius: 10px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
    font-size: 1rem;
    letter-spacing: 1px;
}

body .password-field input::placeholder {
    color: #000;
    font-weight: bold;
}

body .password-field #toggler {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

 

Now we have completed our Styling Of Input and eye icon. Here is our updated output HTML+ CSS.

Portfolio Website using HTML and CSS (Source Code)

HTML+ CSS Code Output:-

 

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Now add JavaScript to toggle Show and Hide Password On Click Eye Icon.

JavaScript Code For Show Password Eye Icon:-

var password = document.getElementById('fakePassword');
var toggler = document.getElementById('toggler');
showHidePassword = () => {
if (password.type == 'password') {
password.setAttribute('type', 'text');
toggler.classList.add('fa-eye-slash');
} else {
toggler.classList.remove('fa-eye-slash');
password.setAttribute('type', 'password');
}
};
toggler.addEventListener('click', showHidePassword);

It’s just some basic JavaScript code. First, we use document.getelementById to take password input in javascript. Then, we use javascript code to build an if/else function that displays and hides passwords with a change in the eye icon.

Toggle between the classes, we will build a function in javascript and use the add and remove methods of the classes to either add the display or show the class or else hide it.

10+ HTML CSS Projects For Beginners (Source Code)

Final Output Of  Show/Hide Password Eye Icon With HTML And JavaScript:-

Live Preview Of Show and Hide Password Eye Icon:-