In any web application registration/login form contains password field which will be used to enter user password for the account creation. To make show and hide password feature will be most user friendly for the application. In this article we will cover on how to hide and show password using html, css and Javascript.
Pre requisites for this example:
In this example we are using three types files
Html, Css and Javascript
index.html
<!DOCTYPE html> <!--=============== BOXICONS ===============--> <!--=============== CSS ===============--> <title>Input password show hidden - Bedimcode</title> <i class='bx bx-lock-alt input__lock'></i> </body> |
style.css
/*=============== INPUT PASSWORD ===============*/ body { .input { .input__lock, .input__icon { .input__lock, .input__password { .input__icon { .input__password { .input__password::placeholder { .input__overlay { /* Transition effect */ .overlay-content ~ .input__lock { .overlay-content ~ .input__password, |
Javascript code
const showHiddenInput = (inputOverlay, inputPass, inputIcon) =>{ // Change icon // Remove icon // Toggle the overlay showHiddenInput('input-overlay','input-pass','input-icon') |
Once we are done the above file let open the file on your browser. You will see the below output
Type some password and click on eye icon, it will show the password
Keywords:
Article Contributed By :
|
|
|
|
112 Views |