HTML + CSSInputs

Contraseña que se revela

Un botón con ojo muestra la contraseña y una línea tacha el icono para indicar que se ve.

Ajustes

16px
1x

Código

<label class="uv-in2p"><input type="password" placeholder="Contraseña" value="secreto123"><button class="ey"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M2 12s3.8-6 10-6 10 6 10 6-3.8 6-10 6-10-6-10-6z"/><circle cx="12" cy="12" r="2.8"/><path class="sl" d="M4 20L20 4"/></svg></button></label>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Inputs

Dónde usarlo

Dejar ver lo que has escrito ahorra muchos intentos fallidos, sobre todo en el móvil. Úsalo en el login de una app, al crear una cuenta o en el paso del wifi al configurar un aparato. La raya sobre el ojo deja claro el estado. Un input para mostrar la contraseña en HTML, CSS y algo de JavaScript.

Ponle al botón un nombre accesible como «Mostrar contraseña» para que los lectores de pantalla lo anuncien. En un registro, acompáñalo de una pista corta con las reglas en lugar de un error al enviar.