Without too much explanation, the code “speaks” for itself.
CSS
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
.parola
{
border:1px solid gray;
overflow:auto;
width:285px;
}
#pswd_img {
border:0px solid red;
width:30px;
float:left;
}
#pswd_txt {
float:left;
width:250px;
border:0px solid green;
}
input[type="password"],input[type="text"]
{
height:24px;
background:white;
border:none;
width:280px;
}
input[type="password"]:focus,input[type="text"]:focus {background:yellow;}
.pswd_ascns:after
{
font-family: FontAwesome;
content: "\f06e";
display: inline-block;
font-size:24px;
color:blue;
}
.pswd_arata {}
.pswd_arata:after {
font-family: FontAwesome;
content: "\f070";
display: inline-block;
color:red;
}
JavaScript (desirable to include at the bottom, before the end of the BODY tag.)
(function fc_pswd() {
var pElement = document.getElementById("pswd_img");
var x = document.getElementById("pswd_in");
pElement.addEventListener('click',function(){
pElement.classList.toggle('pswd_arata');
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
});
} ());
HTML
<div class="parola">
<div id="pswd_txt">
<input type="password" value="IntroduParola" id="pswd_in">
</div>
<div id="pswd_img" class="pswd_ascns"></div>
</div>