This design is extraordinary. First I created a box on a web page. When you input something in that box it will be seen in password format. Then there is a small icon. Clicking on that icon will convert that password format into text.
Hope you learned from the demo above how it works. First I made a box on the web page. I have whitewashed the background color of the box and I have arranged to input all over the place. Here is an icon that can be found by clicking on the password.
How to show and hide Password using eye Icon
First, you create an HTML CSS file. Then attach that CSS file to the HTML file. If you can’t attach the codes, you can take the help of the download link below the article.
Step 1: The basic structure of the Show Hide password
I have created the basic structure of this design using the following HTML and CSS codes. Here I have created a box that can be input all over the place. Box width 320px and height 55px.
Step 2: Create a place to input
Now I have created an input space using the following codes. For this, I have used the input function of HTML. Here the width and height of the input space are equal to the box. This allows you to input the whole box.
The following CSS helped to design the icon. I placed the icon here 15 px away along with the right site.
Step 3: Activate the Toggle Password Visibility
➤ The condition here is that when you click on the icon the password will be converted to text and the height button will be visible. Information about the hide button I have already added using CSS code.
➤ Now I have given the second condition using else. If the above conditions do not apply, the passwords will be in dot form. With this, the hide button will be hidden and the normal button will be seen.
There are many beginners who may have difficulty attaching these codes. For that, I have put below the required source code.
If the above codes are difficult to copy and use, you can use the download button below. After clicking the button, the code will be downloaded automatically.