1

Eu estou tentando fazer uma tela de login mas eu tentei fazer um <input type="checkbox" class="senhaMostrarOuOcultar" onclick="mostrarSenhaEOcultar()"> para que ele ocultasse ou mostrasse a senha, mas quando ele está sem o css funciona normalmente, quando eu coloco o css para de funcionar, eu clico e ele nao marca nao faz nada o css é

input[type="checkbox"]{
position: relative;
left: 490px;
top: 100px;
}

mas eu também já tentei

.senhaMostrarOuOcultar{
position: relative;
left: 490px;
top: 100px;
}

tentei pelo class e pelo input + o tipo dele mas por algum motivo não funciona e eu acho que é por causa do css alguem pode me ajudar

5
  • onclick="mostrarSenhaEOcultar()" cade o JS disso? E cade o Html ?
    – hugocsl
    Commented 6/04/2021 às 20:51
  • o codigo html que mostra o botao era so aquele primeiro codigo ja o js tem function mostrarSenhaEOcultar(){ var senha = document.getElementById("senha"); if(senha.type == "password"){ senha.type = "text"; } else{ senha.type = "password"; } } Commented 6/04/2021 às 20:53
  • o id senha é so da tag de input da senha Commented 6/04/2021 às 20:54
  • @hugocsl alem disso eu deixei bem claro que é o css pq quando ta sem o css ele funciona Commented 6/04/2021 às 20:58
  • Você pode estar correndo o risco de cair no problema X Y. (pt.meta.stackoverflow.com/questions/499/…) Se precisa de ajuda, aconselho que coloque todo o código para que possamos ajudar analisando a fundo todo o contexto! Commented 6/04/2021 às 21:21

1 Resposta 1

1

Não sei como está o seu JavaScript, então vou te sugerir o seguinte código:

function mostrarSenhaEOcultar() {
  var x = document.getElementById("senhaInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
<div>
  <label for="senhaInput">Senha: </label>
  <input type="password" value="123456" id="senhaInput">
</div>
<div>
  <input type="checkbox" id="mostrarOcular" onclick="mostrarSenhaEOcultar()">
  <label for="mostrarOcular">Mostrar Senha</label>
</div>

Eu incluí duas label for para que você possa acessar o input clicando no texto.

Sobre o css, eu não recomendo que você defina posição exata, ainda mais utilizando Bootstrap.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .