Show or Hide Password
Hello Dear readers, Today in this blog you’ll Find Code Show or Hide Password Toggle Using Only HTML , CSS & Javascript. Earlier I have shared many blogs on Show or Hide Password and now I’m going to create a Show or Hide Password Toggle Using Only HTML , CSS & Javascript.
HTML CODE :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Show or Hide Password Toggle Using Only HTML , CSS & Javascript</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/><link rel="stylesheet" href="https://e6t7a8v2.stackpathcdn.com/tutorial/css/fontawesome-all.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.min.css" integrity="sha512-H/zVLBHVS8ZRNSR8wrNZrGFpuHDyN6+p6uaADRefLS4yZYRxfF4049g1GhT+gDExFRB5Kf9jeGr8vueDsyBhhA==" crossorigin="anonymous" />
</head>
<body>
<div class="wrapper">
<input type="password" placeholder="Enter Password" required>
<span class="show-btn"><i class="fa fa-eye"></i></span>
</div>
<script>
const passField = document.querySelector("input");
const showBtn = document.querySelector("span i");
showBtn.onclick = (()=>{
if(passField.type === "password"){
passField.type = "text";
showBtn.classList.add("hide-btn");
}else{
passField.type = "password";
showBtn.classList.remove("hide-btn");
}
});
</script>
</body>
</html>
CSS CODE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
align-items: center;
justify-content: center;
display: flex;
height: 100%;
width:100%;
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
}
.wrapper{
position: relative;
height: 55px;
width: 320px;
border-radius: 5px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}
.wrapper input{
width: 100%;
height: 100%;
border: 1px solid #8e44ad;
padding-left: 15px;
font-size: 18px;
outline: none;
border-radius: 5px;
}
.wrapper input::placeholder{
font-size: 17px;
}
.wrapper span{
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #8e44ad;
cursor: pointer;
display: none;
}
.wrapper input:valid ~ span{
display: block;
}
.wrapper span i.hide-btn::before{
content: "\f070";
}
0 Comments