25% off ProSNIPC25OFF

Add Show/Hide Password Toggle to Login Form

Appends a Show / Hide button beside the password field on the WordPress login page so users can reveal their password while typing.

JavaScriptby SnipCraft
js
(function () {
    'use strict';

    document.addEventListener('DOMContentLoaded', function () {
        var pwField = document.querySelector('#user_pass');
        if (!pwField) return;

        var toggle = document.createElement('button');
        toggle.type = 'button';
        toggle.textContent = 'Show';
        toggle.setAttribute('aria-label', 'Toggle password visibility');
        toggle.style.cssText = [
            'margin-left:8px',
            'padding:2px 10px',
            'cursor:pointer',
            'font-size:13px',
            'border:1px solid #8c8f94',
            'border-radius:3px',
            'background:#f6f7f7',
            'color:#50575e',
            'vertical-align:middle',
        ].join(';');

        pwField.parentNode.insertBefore(toggle, pwField.nextSibling);

        toggle.addEventListener('click', function () {
            var isHidden = pwField.type === 'password';
            pwField.type = isHidden ? 'text' : 'password';
            toggle.textContent = isHidden ? 'Hide' : 'Show';
            pwField.focus();
        });
    });
})();
#javascript#login#password#users#ux