Show / Hide Password With Eye Icon using HTML & JavaScript

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create Show and Hide a Password With an Eye Icon. 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.

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

HTML Code

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" />

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)

Output

 

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

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

Javascript Code

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 class or else hide it.

10+ HTML CSS Projects For Beginners (Source Code)

Video Output Of Show / Hide Password With Eye Icon:

Final Output Of Show and Hide Password With Eye Icon