Pretty Nice Password Visibility Switcher

Preview:

Description:

There are many sites that allow you to enter a password with no problem but showing your password to everyone on the internet is something that should not be allowed, well at least not by default.

This password visibility switcher allows your users to show or hide password strings by clicking a little eye icon inside the password field.

How to use it:

1. Add the Password Visibility Switcher to your password field.

<div class="inputBox">
  <input type="password" name="" placeholder="Enter Password" id="password">
  <div id="toggle" onclick="showHide();"></div>
</div>

2. The necessary CSS styles for the Password Visibility Switcher.

/* password field */
.inputBox{
  position: relative;
  width: 400px;
  height: 60px;
}
.inputBox input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 20px;
  font-size: 18px;
  box-sizing: border-box;
  outline: none;
  border-radius: 8px;
  box-shadow: -4px -4px 10px rgba(255, 255, 255, 1);
      inset: 4px 4px 10px rgba(0,0,0,0.05);
      inset: -4px -4px 10px rgba(255, 255, 255, 1);
      inset: 4px 4px 10px rgba(0,0,0,0.05);   
}
.inputBox input::placeholder{
  color: #ccc;
}
/* Password Visibility Switcher */
#toggle{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(02.png);
  background-size: cover;
  cursor: pointer;
}
#toggle.hide{
  background: url(03.jpg);
  background-size: cover;
}

3. The main JavaScript to enable the Password Visibility Switcher.

const password =document.getElementById('password');
const toggle = document.getElementById('toggle');
function showHide(){
  if(password.type === 'password'){
    password.setAttribute('type','text');
    toggle.classList.add('hide')
  }
  else{
    password.setAttribute('type','password');
    toggle.classList.remove('hide')
  }
}