패스워드 확인 (보이기/숨기기) 토글 버튼
<style>
.pwdbox {
position: relative;
display: inline-block;
}
.pwdbox input[type="password"],
.pwdbox input[type="text"] {
padding-right: 30px; /* 이미지 배치용 공간 확보. */
}
.password-toggle {
position: absolute;
top: 50%;
right: 5px; /* 오른쪽 여백 조절 */
transform: translateY(-50%);
cursor: pointer;
}
</style>
<div class="pwdbox">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
<img src="https://i.imgur.com/YrkG5xB.gif" alt="Toggle Password" class="password-toggle" id="togglePwd">
</div>
<script>
const pwdInput = document.getElementById('pwd');
const togglePwd = document.getElementById('togglePwd');
togglePwd.addEventListener('click', function () {
if (pwdInput.type === 'password') {
pwdInput.type = 'text';
togglePwd.src = 'https://i.imgur.com/YrkG5xB.gif';
} else {
pwdInput.type = 'password';
togglePwd.src = 'https://i.imgur.com/PQNhCln.gif';
}
});
</script>
결과보기
