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

Show And Hide Password Menggunakan HTML dan CSS - Inpows — Show And Hide Password Menggunakan HTML dan CSS – Inpows

Temukan source code HTML dan CSS menarik lainnya hanya di Inpows.

Konfigurasi Typescript dengan Babel, Mocha dan Webpack

Membuat Icon Pulse Animation Menggunakan HTML dan CSS

Membuat Algoritma Insertion Sort di Kotlin

Membuat Algoritma Bubble Sort di Kotlin