<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box label {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
height: 24px;
background-color: pink;
cursor: pointer;
background: url(./images/close.png) no-repeat;
background-size: cover;
}
.box label.active {
background-image: url(./images/open.png);
}
</style>
<div class="box">
<label for=""></label>
<input type="password" name="" id="pwd">
</div>
<script>
let label =document.querySelector('label')
let pwd = document.querySelector('#pwd')
let flag = true
label.addEventListener('click',function(){
if(flag === true){
pwd.type = 'text'
flag = false
label.classList = 'active'
}else {
pwd.type = 'password'
flag = true
label.classList = ''
}
})
</script>