How To Show/Hide an Input Field Password Using the Eye Icon — HTML, CSS & JavaScript

In this tutorial, you'll learn how to toggle show/hide password with eye icon

Sponsor me on GitHub!

Follow my blog:

[aurelieneveu]

i've been turning aroud this problem for a while now ! your explainations helped a lot, a big thank you :)

[Iro]

If someone having a trouble with eye not slashig, then put this:

this.classList.toggle("fa-eye-slash",
Insted of this:

[spongebob_gamingofficial]

It helps me a lot, I'm still practicing web dev

[Mathotto]

it's a good way of login password, thanks a lot

[woutflorian]

Would you please tell me how to switch the icons so that the input start with the "fa-eye-slash" icon and password hidden and when toggled the "fa-eye" icon and the password showing?

For some reason simple switching them around is not doing the trick... 🤔

[narendrasubramanya]

Great video dude ... Is it possible to change the password character from dots to say something like x or to any character of our choice. If you can bring up a tutorial video for that it would be very helpful and informative too. Kudos for this video

[crpvnum]

I am trying to adapt this into my own project (my own login screen that I have designed) - but having difficulty getting it to work. It is probably the way I have my code set up for the fields and icons which is slightly different than yours. I use an a.href for the icon rather than CSS code with pointer property.

<div class="input-group mb-3">

<span class="input-group-text"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" placeholder="Password" />

<div class="input-group-text">
<a href="#" class="text-dark" id="show-password">
<i class="fa fa-eye"></i>
</a>
</div>

</div>

Clicking on the fa-eye icon makes a "missing image" icon appear next to the fa-eye icon, instead of showing the fa-eye-slash icon in place of the fa-eye icon. And the password does not change to text.

Any help would be greatly appreciated. Thank you in advance.

[AquariusGoldTM]

Fantastic and precise bro. I tried the script on my form but I got a unique problem my form has multiple password fields and even though i gave them the same id only the first field was responsive. all the rest didn't seems to hide and show the password. The icons were fine though.

[laziz_khamidov]

but it worked when I did methods = dialog

[sqhoris]

Can i get the source code? Mine is not working it says "Uncaught TypeError: Cannot read properties of null(reading 'addEventListener')

[Nitesh__Nayak]

It does not work with latest library of font-awesome.

[jamesokonkwo]

This part is not yet working for me, does not toggle. Please what are the things I should ensure that are put in place?