Show & Hide Password in HTML CSS & JavaScript

by Letscode - October 4,2023

Hello friend, I hope you are doing well. Today you are going to learn how to show and hide passwords in the input field by clicking on the toggle using HTML CSS and JavaScript. There are lots of Login Forms I have created with different animations and features. But many of you have requested me to create input filed label up animation and toggling password visibility, so here we go.

As a definition, password show and hide mean showing or hiding the letter of the passwords by clicking on the toggle button. This type of feature is mostly added to the form for security purposes because many users do not want to show their passwords to those who are around them.

Let’s have a look at the given image of our project [how to show and hide password], as you can see on the given image. On the first input field you can see we can’t see the letter and eye icon is in hiding condition and on the second password field we can see the letter of password clearly and the eye icon is in show condition.

Show and Hide Password [Source Code]

To take the source code of this Login and Registration Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.

HTML

                        
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!----==== CSS ====-->
  <link rel="stylesheet" href="style.css" />

  <!----==== Icounscout Link ====-->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
  <title>Password Show & Hide HTML CSS JavaScript | Letscodeweb</title>
  <script src="../custom-scripts.js" defer></script>
</head>

<body>
  <div class="container">
    <div class="input-box">
      <input type="password" spellcheck="false" required />
      <label for="">Password</label>
      <i class="uil uil-eye-slash toggle"></i>
    </div>
  </div>

  <script>
    const toggle = document.querySelector(".toggle"),
      input = document.querySelector("input");

    toggle.addEventListener("click", () => {
      if (input.type === "password") {
        input.type = "text";
        toggle.classList.replace("uil-eye-slash", "uil-eye");
      } else {
        input.type = "password";
      }
    });
  </script>
</body>

</html>

CSS

                        
/* Coding by Letscode */
/* Google Font Import - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}

.container {
  position: relative;
  max-width: 440px;
  width: 100%;
  padding: 20px;
  border-radius: 6px;
  background-color: #fff;
}

.container .input-box {
  position: relative;
  height: 65px;
}

.input-box input {
  position: absolute;
  height: 100%;
  width: 100%;
  outline: none;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 22px;
  padding: 0 35px 0 18px;
  transition: all 0.2s linear;
}

input:is(:focus, :valid) {
  border-color: #4070f4;
}

.input-box :is(label, i) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  transition: all 0.2s linear;
}

.input-box label {
  left: 18px;
  pointer-events: none;
  font-size: 22px;
  font-weight: 400;
}

input:is(:focus, :valid)~label {
  color: #4070f4;
  top: 0;
  font-size: 12px;
  font-weight: 500;
  background-color: #fff;
}

.input-box i {
  right: 15px;
  cursor: pointer;
  font-size: 20px;
}

input:is(:focus, :valid)~i {
  color: #4070f4;
}

If you face any difficulties while creating your this Password Show and Hide Project or your code is not working as expected, you can download the source code files for this Show or Hide Password Project for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Show & Hide Password in HTML CSS & JavaScript

by Letscode - October 4,2023

Show and Hide Password [Source Code]

Letscode - October 20,2023

Letscode - October 4,2023

Letscode - October 10,2023

Letscode - November 4,2023

Letscode - October 24,2023