<label>
Password:
<div>
<input type=password placeholder="Enter Your Password" />
<i class="fa fa-eye"></i>
</div>
</label>
label {
font-family: sans-serif;
div {
position: relative;
display: inline;
input {
padding: 4px;
border-radius: .4em;
width: 200px;
+i{
user-select: none;
cursor: pointer;
position: absolute;
right: 4px;
top: 3px;
}
}
}
}
View Compiled
"use strict";
document.querySelector('input[type="password"]+i')
.addEventListener('click', function() {
let input = this.previousElementSibling;
input.type = input.type == 'password' ? 'text' : 'password';
this.className = this.className == 'fa fa-eye' ? 'fa fa-eye-slash' : 'fa fa-eye';
});
This Pen doesn't use any external JavaScript resources.