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:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="input">
<div class="input__overlay" id="input-overlay"></div>
<input type="password" placeholder="Password..." class="input__password" id="input-pass">
<i class='bx bx-hide input__icon' id="input-icon"></i>
</div>
</html>
{
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
margin: 0;
height: 100vh;
display: grid;
place-items: center;
background-color: #D2D2D2;
}
position: relative;
background-color: #000000;
padding: 1.35rem 1.25rem;
border-radius: .5rem;
display: flex;
align-items: center;
column-gap: .75rem;
}
font-size: 1.25rem;
z-index: 1;
}
color: #FFFFFF;
}
color: #000000;
cursor: pointer;
}
background: transparent;
border: none;
outline: none;
font-size: 14px;
z-index: 1;
}
color: #FFFFFF;
}
width: 32px;
height: 32px;
background:#FFFFFF;
position: absolute;
right: .9rem;
border-radius: 50%;
z-index: 0;
transition: .4s ease-in-out;
}
.overlay-content {
width: 100%;
height: 100%;
border-radius: .5rem;
right: 0;
}
color: #000000;
}
.overlay-content ~ .input__password::placeholder {
color: #000000;
}
const overlay = document.getElementById(inputOverlay),
input = document.getElementById(inputPass),
iconEye = document.getElementById(inputIcon)
iconEye.addEventListener('click', () =>{
// Change password to text
if(input.type === 'password'){
// Switch to text
input.type = 'text'
iconEye.classList.add('bx-show')
}else{
// Change to password
input.type = 'password'
iconEye.classList.remove('bx-show')
}
overlay.classList.toggle('overlay-content')
})
}
hide password html form
hide password html view source
show hide password eye icon html
how to hide password in html source code
html input password hide value
how to hide password in html table
html password hide and show
Article Contributed By :
|
|
|
|
68 Views |