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

In this tutorial, you’ll learn how to implement the following show/hide feature on the password input.

HTML:

First things first, we need the eye and slash-eye icons. There’s several icon libraries from which to choose from but lets use font awesome. Paste the following CDN link between your head tags so you can access the library.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

Inside the body tags, create a container with an input field of type password and eye icon inside.

<div class="password-container">
  <input type="password" placeholder="Password..." id="password">
  <i class="fa-solid fa-eye" id="eye"></i>
</div>

CSS:

Not much going on here but some basic styling. The most important thing to note is that we’re using position relative on the password-container class for the purpose of using position absolute on the icon. This allows us to position the icon directly over the input field.

.password-container{
  width: 400px;
  position: relative;
}
.password-container input[type="password"],
.password-container input[type="text"]{
  width…