csslayout/contents/toggle-password-visibility.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Toggle password visibility	Create a toggle password visibility with CSS flexbox	css flexbox, toggle password visibilit

HTML

<div class="toggle-password-visibility">
    <!-- Text input -->
    <input type="text" class="toggle-password-visibility__input" />

    <!-- Toggle button sticks to the right -->
    <button class="toggle-password-visibility__toggle">...</button>
</div>

CSS

.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');
});

{% demo %}{% include "covers/toggle-password-visibility.njk" %}{% enddemo %}