1

Estoy creando una página web, recién voy por el index de la misma, y de momento no tiene más código que HTML, CSS y JAVASCRIPT, sin embargo, estoy presentando un problema con el diseño y el código que me impide agregar el ícono del ojo, para ver u ocultar la contraseña en el input de la contraseña, sin que se mueva de lugar el ícono del candado o el placeholder.

Código HTML, CSS y JAVASCRIPT en ese mismo orden:

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#id_password');
togglePassword.addEventListener('click', function(e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
  }

);
.input - field {
  max - width: 380 px;
  width: 100 %;
  height: 55 px;
  background - color: var (--bg - input);
  margin: 10 px 0;
  border - radius: 55 px;
  display: grid;
  grid - template - columns: 15 % 85 %;
  padding: 0 .4 rem;
}

.input - field i {
  text - align: center;
  line - height: 55 px;
  color: var (--input - icon);
  font - size: 1.1 rem;
}

# togglePassword {
  text - align: center;
  color: var (--input - icon);
  padding: 10 px;
}

.passtoggle {
  padding - top: 2 px;
}

.input - field input {
  background: none;
  outline: none;
  border: none;
  line - height: 1;
  font - weight: 600;
  font - size: 1.1 rem;
  color: var (--input);
}
<div class="input-field">
  <i class="fas fa-user"></i>
  <input type="text" name="username" autocomplete="username" placeholder="Nombre de usuario">
</div>
<div class="input-field">
  <i class="fas fa-lock"></i>
  <input type="password" name="password" autocomplete="current-password" placeholder="Contraseña" id="id_password">
  <i class="far fa-eye" id="togglePassword" style="cursor: pointer;"></i>
</div>

¿Me podrán ayudar? Agrego también un link para poder visualizar la página web en su totalidad e interactuar con las opciones (inciar sesión, registro, cambiar a modo oscuro, etc): https://priva.reversecode.repl.co/

2
  • Te comento que podés agregar todos tus códigos aquí en tu misma pregunta. Puedes leer Cómo preguntar o simplemente edita tu pregunta agregando cada código entre triple comilla invertida: ```. Todo tu código CSS entre las triples comillas y asi las HTML5 y las js. Y es importante que agreges códigos solamente de la parte que tienes problemas, para facilitar comprensión y presentar un código limpio Commented el 9 dic. 2021 a las 1:31
  • Gracias por responder y dar esa sugerencia. Sé que se puede hacer, pero opté por utilizar una página externa para que entrara todo el contenido. Igualmente modificaré la pregunta para ser concreto en qué sector me quiero enfocar, ¡Muchas gracias! Commented el 9 dic. 2021 a las 2:22

2 respuestas 2

0

Si revisas el contenedor con el inspector verás lo siguiente:

introducir la descripción de la imagen aquí

Una pista importante es que se ve como una tabla. Lo que está sucediendo es que en el código estás usando la propiedad grid-template-columns, que determina cuántas columnas habrá y qué tamaño tendrán.

.input-field {
    grid-template-columns: 15% 85%;
}

Puedes solucionar esto añadiendo otra columna, así:

.input-field {
    grid-template-columns: 15% 70% 15%;
}

O optar por usar la unidad fraction para determinar el tamaño de la columna del medio:

.input-field {
    grid-template-columns: 15% 1fr 15%;
}

Ya que estás usando los mismos estilos para dos elementos con diferente estructura, considera cambiar la clase o crear una nueva para hacer este cambio.

Una vez hecho esto, aparece otro inconveniente. El input y el ojo están desplazados:

introducir la descripción de la imagen aquí

Vas al inspector, y puedes ver que el culpable de esto es el padding del ícono del ojo:

introducir la descripción de la imagen aquí

Lo quitas y listo:

introducir la descripción de la imagen aquí

En resumen, tienes que:

  • Cambiar la propiedad grid-template-columns.
  • Quitar el padding del botón (en #togglePassword).
1
  • ¡Excelente! Ha funcionado a la perfección. Me gustaría poder darte un "up-vote" pero no puedo por no tener 15 puntos de reputación. Sin embargo, marco esta respuesta como la correcta. Muchísimas gracias, me salvaste. Commented el 9 dic. 2021 a las 4:59
0

Agrega la posición absoluta al ojo y la posición relativa al input, asi:

.input-field {
    max-width: 380px;
    width: 100%;
    height: 55px;
    background-color: var(--bg-input);
    margin: 10px 0;
    border-radius: 55px;
    display: grid;
    grid-template-columns: 15% 85%;
    padding: 0 0.4rem;
    position: relative;
}
#togglePassword {
    text-align: center;
    color: var(--input-icon);
    padding: 0px 20px;
    position: absolute;
    right: 0;
}
1
  • No es exactamente lo que estaba buscando, sin embargo más o menos servía para solucionar o dar una guía visual mejor estructurada al problema anterior. Gracias a la ayuda de otro usuario más, pude conseguir el resltado deseado. Aún así, muchísimas gracias por tu ayuda y coperación respondiendo esta pregunta. Commented el 9 dic. 2021 a las 4:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.