Here I have taken the help of input type ‘password’. As a result, what you input will be available in dot form. I have added an icon on the right side here. If you click on that icon, these dots will be converted into text.
See the Pen Untitled by Code Media (@codemediaweb) on CodePen.
Hopefully, the demo above has helped you to know how this design works. You can easily add it to your project.
Below is the complete tutorial on how I created this project (Hide / Show Password using Eye icon). For this, you create an HTML and CSS file then follow the steps below.
Step 1: Basic structure of Show Hide Password
Using the following HTML and CSS codes I have created a box at the top of the web page. You can input everything in this box. But this box is now just a background. Later I implemented it to input using the input function.
The height of the box is 55 px and the width is 320px. I used white as the background color and the box-shadow helped to enhance the beauty.
Step 2: Create a place to input the password
Now I have created a place to input the password using input. As a result, when you type something, it will be converted to dot form. Here the size of the input is kept equal to the box i.e. the input can be done in the entire space of the box.
Step 3: Add an icon to hide the password
Now I have added an icon that will help to see and hide the password.
I made this password visible and the hidden system functional using OnClick. I have given a condition using the if function.
➤ When you click on the icon, if the input is a password, it will be converted to text and the icon will change with it.
➤ To change the icon I have already been instructed to change the icon in the tags called ‘Hidden Button’ using CSS code.
Then by adding else I added the second condition that
➤ If the above conditions do not apply then the password will remain in the dot and the new icon will be removed. The old icon can be seen instead.
Be sure to comment on how you like the article. You can download the source code required to create this project (password show hide program using eye icon) from the download button below.