.toggle-password-visibility {
display: flex;
/* Border */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.25rem;
}
.toggle-password-visibility__input {
border-color: transparent;
/* Take available width */
flex: 1;
}
.toggle-password-visibility__toggle {
/* Reset */
background: #fff;
border-color: transparent;
/* Center the content */
display: flex;
align-items: center;
justify-content: center;
}
In reality, the click
event handler of the button needs to update the type
attribute of the input to text
or password
:
document.querySelector('.toggle-password-visibility__toggle').addEventListener('click', (e) => {
const input = e.target.previousElementSibling;
const type = input.getAttribute('type');
input.setAttribute('type', type === 'text' ? 'password' : 'text');
});