mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-04 13:17:48 +02:00
125 lines
2.8 KiB
Plaintext
125 lines
2.8 KiB
Plaintext
---
|
|
category: Input
|
|
created: '2019-11-23'
|
|
description: Create a toggle password visibility with CSS flexbox
|
|
keywords: css flexbox, toggle password visibility
|
|
thumbnail: /assets/css-layout/thumbnails/toggle-password-visibility.png
|
|
title: Toggle password visibility
|
|
---
|
|
|
|
## HTML
|
|
|
|
```html index.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
|
|
|
|
```css styles.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`:
|
|
|
|
```js
|
|
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');
|
|
});
|
|
```
|
|
|
|
<Playground>
|
|
```css styles.css hidden
|
|
body {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggle-password-visibility {
|
|
display: flex;
|
|
|
|
/* Border */
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.25rem;
|
|
padding: 0.25rem;
|
|
|
|
/* Demo */
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.toggle-password-visibility__input {
|
|
border-color: transparent;
|
|
/* Take available width */
|
|
flex: 1;
|
|
|
|
/* Demo */
|
|
width: 16rem;
|
|
}
|
|
|
|
.toggle-password-visibility__toggle {
|
|
/* Reset */
|
|
background: #fff;
|
|
border-color: transparent;
|
|
|
|
/* Center the content */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggle-password-visibility__svg {
|
|
fill: none;
|
|
height: 1.5rem;
|
|
stroke: #d1d5db;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 1;
|
|
width: 1.5rem;
|
|
}
|
|
```
|
|
|
|
```html index.html hidden
|
|
<div class="toggle-password-visibility">
|
|
<input type="text" class="toggle-password-visibility__input" value="*****" />
|
|
<button class="toggle-password-visibility__toggle">
|
|
<svg class="toggle-password-visibility__svg" viewBox="0 0 24 24">
|
|
<path d="M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
```
|
|
</Playground>
|