In this post You'll learn how to show & hide password with icon or image using HTML, CSS and JavaScript. When click on icon or image, if password is visible, after click, the password hide's, or if password is already hidden then password will visble.
By end of this tutorial you'll be able to create this show and hide password functionality with image. You can find the full source code at the end of this blog post.
It's easy to make it. we just have to change the type of input field. Just add function to change the type of the input field when user click on image or element containing image or element by click you want to change the password type.
Means when user click on HTML element, if the input field type is equal to text (type = "text") just change it equals to password (type = "password") and if input field type is equal to password (type = "password") than change it equals to text (type = "text").
Video Tutorial on Show And Hide Password With Image:
Show & hide Password With Icon/Image.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
Steps to change password visibility on just image click.
Step 1: Add basic html structure and boxes.
Create box or house for input field and image
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 350px;
background-color: #fff;
padding: 20px 25px;
}
Output :
Step 2: Add input field and image.
Add input field and image inside above created box.
As we have to change the visibility of password based on image click. We'll call a function named change() on click of the image. You can also do it with javascript. But any way we've just call it, Later we'll declare the function inside the javascript.
HTML
<div class="input_box">
<input type="text" class="input" placeholder="Password">
<img src="images/hide.png" onclick="change()" class="password">
</div>
CSS
.password{
width: 40px;
height: auto;
cursor: pointer;
}
.input_box{
width: 100%;
border-width: 0px 0px 2px 0px;
border-style: solid;
display: flex;
align-items: center;
}
.input{
border: none;
outline: none;
width: 100%;
font-size: 25px;
padding: 8px 0px;
}
Output :
Step 3: Create JavaScript Function to Show and Hide Password.
Now let's declare the function that we called above inside the image tag on click.
In that function we'll check, if input type is text or not. If input type is text we'll change it to password and also change image of img tag.
And else if input type is not text then we'll change input type to text and also change image of img tag too.
is image folder and image name (like this password.src = folder of image/image name).
JavaScript
let input = document.querySelector('.input');
let password = document.querySelector('.password');
function change(){
if (input.type == 'text') {
input.type = 'password';
password.src = 'images/visible.png';
}else{
input.type = 'text';
password.src = 'images/hide.png';
}
}
Output :
when click on img tag or class name "password".
That's it you can see demo in above youtube video.
You may like :
- Show & hide passoword with checkbox.
- Password strength indicator in signup form.
- How to validate confirm password validation.
- How to show and hide sidebar menu using only HTML & CSS.
- How to show button only when input field have value.
Final code :
That's how you can create show and hide password functionality with icon/image using HTML, CSS & JavaScript. If you have any query or suggestion feel free to write them in the comment section.
Share your thoughts.