How to change the button(<button>) from "View password" to an image (<img>)

Asked

Viewed 141 times

0

There is a register field of an employee called senha of which there is a button called "Ver senha" that lets you see the user password, only I want to remove the button Ver senha I did in javascript and wanted to know how to replace this <button> by an icon called olho.png better match with the field (issue of affordance).

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"> 
    <title> Cadastrar Funcionário </title>
    <link rel="stylesheet" href="/WEB/css/css.css">
    <script>
        function mostrarSenha(){
            var tipo = document.getElementById("senha")
            if (tipo.type == "password") {
                tipo.type = "text";
            }else{
                tipo.type = "password";
            }
        }
    </script> 
</head>
<body> 

    <form method="POST">
        <p> Senha: <input type="password" name="senha" id="senha" size=30 maxlength="32" required="">
        <button type="button" onclick="mostrarSenha()"> Ver senha</button> </p>
    </form>

caminho da imagem da qual eu quero substituir o <button> por um <img>: img/olho.png
javascript html css

  • pq does not put background: url('img/olho.png') in the css that defines the button?

  • You can show me in code?

  • yes, see the answer

  • If I understand what you want to do, I find a solution with more pleasant svg, like that one. When I needed to do it, I used it as a reference and adapted it to my need :)

  • @Rafaeltavares interesting that code.

1 answer

3


You can set an image as background of the button, like this:

function mostrarSenha() {
   document.getElementById('senha').type = 'text';
}
.btn-senha {
   background: url('http://icons.iconarchive.com/icons/custom-icon-design/mono-general-4/16/eye-icon.png') no-repeat;
   width: 18px;
   height: 18px;
}
 <p> 
    Senha: <input type="password" name="senha" id="senha" size=30 maxlength="32" required="">
    <button class="btn-senha" type="button" onclick="mostrarSenha()"></button>
 </p>

  • The first two codes are in CSS?

  • In the Executar of your code does not hide the password

  • If you enter a password and press the button it displays the password. see that in my example I changed the type from "password" to "text". Couldn’t identify the code? needs to study this @Fujjin :) the first is javascript, the second is css

  • Ricardo, I think he wants you to switch between show/hide by clicking the ;0 icon

  • I thought about it @Sam but by the text "only that I want to remove the View password button" can’t be sure.. Anyway, it was just style, in the example it was still "free" the password display ;)

  • The text says one thing but the code shows an if....

  • yes, the very core of the answer is the background, that is passing almost unnoticed :)

Show 2 more comments

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.