//HTML <div class="form__block"> <label for="customer-password">Password</label> <div class="form__input"> <input type="password" name="customer-password" id="customer-password" min="6"/> </div> <div class="customer-password-icon"> <i aria-label="click to show password" class="fa-solid fa-eye"></i> <i aria-label="click to hide password" class="fa-solid fa-eye-slash"></i> </div> </div> //Show hide Password const togglePassword = () => { const passwordInput = document.getElementById('customer-password'); const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; passwordInput.setAttribute('type', type); if (type === 'text') { eyeIcon.style.display = 'block'; eyeHideIcon.style.display = 'none'; } else { eyeIcon.style.display = 'none'; eyeHideIcon.style.display = 'block'; } };
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter