Password Show Hide Button in HTML CSS & JS

Password Show Hide Button in HTML CSS & JavaScript

by Letscode - October 4,2023

Hello readers, Today in this blog you’ll learn how to create a Password Show Hide Button using HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Form using HTML & CSS. But there aren’t a password show hide button/features. Now it’s time to create a Password Show Hide Button.

As you know, when we log in or signup on any social platform like Facebook, Instagram then we have to put an email or username and password. Almost all social networks hide passwords by default in a bullet format, and there is a button, text, or checkbox to show our typed characters in the text format.

In the image, you can see there is a password field with the password show hide eye button. This Password Show or Hide Feature-based in Javascript.

When you entered some password in that field. At first, those entered characters are in bullet format by default. And, when you click on that eye icon the characters will convert into text format.

Password Show or Hide Button [Source Codes]

To create this program (Password Show Hide Button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

HTML

                                          
<!DOCTYPE html>
<!-- Created By Letscodeweb -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Password Show-Hide Button</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="content">
         <div class="lock">
            <div class="fa fa-lock"></div>
         </div>
         <input type="password" placeholder="Enter Password" required>
         <span class="show-hide">
         <i class="fa fa-eye"></i>
         </span>
      </div>
      <script>
         const pass_field = document.querySelector("input");
         const show_btn = document.querySelector("i");
         show_btn.addEventListener("click", function(){
           if(pass_field.type === "password"){
             pass_field.type = "text";
             show_btn.classList.add("hide");
           }else{
             pass_field.type = "password";
             show_btn.classList.remove("hide");
           }
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS

                                              
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.content{
  height: 50px;
  width: 280px;
  display: flex;
  position: relative;
}
.content .lock{
  position: absolute;
  height: 50px;
  width: 50px;
  background: #48DBFB;
  color: white;
  line-height: 48px;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  border: 1px solid #48DBFB;
}
.content input{
  height: 100%;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #48DBFB;
  padding-left: 60px;
  font-size: 16px;
  outline: none;
  color: #37d7fb;
  font-family: 'Poppins',sans-serif;
}
input:focus{
  box-shadow: 0 0 15px #82e6fc,
              0 0 25px #b4f0fd,
              0 0 35px #ffffff;
}
input::placeholder{
  color: #a6a6a6;
}
.show-hide{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.show-hide i{
  font-size: 19px;
  color: #48DBFB;
  cursor: pointer;
  display: none;
}
.show-hide i.hide:before{
  content: '\f070';
}
input:valid ~ .show-hide i{
  display: block;
}

That’s all, now you’ve successfully created a Multi-Step Form with Step Progress Bar in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Password Show Hide Button in HTML CSS & JavaScript

by Letscode - October 4,2023

Password Show or Hide Button [Source Codes]

Letscode - October 20,2023

Letscode - October 4,2023

Letscode - October 10,2023

Letscode - November 4,2023

Letscode - October 24,2023