Skip to main content
Se removieron links externos para revisar el código HTML, CSS y JS para agregarlo dentro de la pregunta misma, enfocando en dónde está el problema.
Origen Enlace

estoyEstoy 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.

Dejo un link para poder ver el código fuente en versiónCódigo HTML: https://ctxt.io/2/AABgrsk-FA, el código en CSS: https://ctxt.io/2/AABgruUAEw y del código de JAVASCRIPT en ese mismo orden: https://ctxt.io/2/AABgyh3eEQ.

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>

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.

Dejo un link para poder ver el código fuente en versión HTML: https://ctxt.io/2/AABgrsk-FA, el código en CSS: https://ctxt.io/2/AABgruUAEw y del código de JAVASCRIPT: https://ctxt.io/2/AABgyh3eEQ.

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>

Origen Enlace

Ver/ocultar contraseña ¿Cómo arreglar mí código?

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.

Dejo un link para poder ver el código fuente en versión HTML: https://ctxt.io/2/AABgrsk-FA, el código en CSS: https://ctxt.io/2/AABgruUAEw y del código de JAVASCRIPT: https://ctxt.io/2/AABgyh3eEQ.

¿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/