Show And Hide Password Menggunakan HTML dan CSS – Pada artikel kali ini kita akan membuat show and hide password menggunakan html dan css. Untuk membuat show and hide password anda perlu membuat tiga file yaitu index.html, style.css, dan script.js. Simak artikel ini lebih lanjut untuk mempelajari lebih jauh mengenai bagaimana membuat show and hide password menggunakan html dan css.
Daftar Isi
Kode File CSS
body {
min-height: 100vh;
background: #dbdbdb;
display: flex;
align-items: center;
justify-content: center;
}
.pwd {
background: #111625;
border-radius: 12px;
box-shadow: rgba(100, 100, 111, .5) 0px 7px 29px 0px;
position: relative;
border: solid 0.3em;
border-color: red cyan green gold;
}
.pwd input {
background: transparent;
border: none;
font-size: 1.2em;
color: #dbdbdb;
}
.pwd input:focus {
outline: none;
}
.pwd i {
font-size: 1.2em;
padding: 1em;
color: #dbdbdb;
transition: 0.3s;
}
.pwd .fa-eye,
.pwd .fa-eye-slash {
cursor: pointer;
color: gray;
width: 1.3em;
}
.pwd .overlay {
position: absolute;
top: 50%;
right: 1em;
transform: translateY(-50%);
background: #dbdbdb;
width: 2.5em;
height: 2.5em;
border-radius: 50%;
z-index: 0;
transition: 0.5s ease-in-out;
}
.pwd .overlaycover {
width: 100%;
height: 100%;
border-radius: 12px;
right: 0;
}
.pwd > div:nth-child(2) {
position: relative;
}
Kode File Javascript
const input = document.querySelector(".pwd input")
const eye = document.querySelector(".pwd .fa-eye-slash")
const lock = document.querySelector(".pwd .fa-lock")
const overlay = document.querySelector(".pwd .overlay")
eye.addEventListener("click", () => {
if(input.type === "password"){
input.type = "text"
eye.classList.remove("fa-eye-slash")
eye.classList.add("fa-eye")
setTimeout(()=>{
lock.getElementsByClassName.color = "#111625"
}, 500)
} else {
input.type = "password"
eye.classList.remove("fa-eye")
eye.classList.add("fa-eye-slash")
lock.style.color = "#dbdbdb"
}
overlay.classList.toggle("overlay-cover")
})
Kode File HTML
<!DOCTYPE html>
<html>
<head>
<TITLE>Show and Hide Password</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="pwd">
<div class="overlay"></div>
<div>
<i class="fa fa-lock"></i>
<input type="password" placeholder="Password..."/>
<i class="fa fa-eye-slash"></i>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Keluaran yang dihasilkan
Temukan source code HTML dan CSS menarik lainnya hanya di Inpows.
Baca Juga
Membuat Blur Loading Text Animation Menggunakan HTML & CSS
Konfigurasi Typescript dengan Babel, Mocha dan Webpack
Membuat Icon Pulse Animation Menggunakan HTML dan CSS