👁️눈 아이콘으로 로그인 비밀번호 확인하는 방법

.password-box {
	position: relative;
	width: 250px;
}

.password-box input[type="password"],
.password-box input[type="text"] {
	width: 100%;
	padding-right: 40px;
}

.toggle-password {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 18px;
	color: #888;
}

.password-box {
	position: relative;
	width: 250px;
}

.password-box input[type="password"],
.password-box input[type="text"] {
	width: 100%;
	padding-right: 40px;
}

.toggle-password {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 18px;
	color: #888;
}

<div class="password-box">
	<input type="password" id="password" placeholder="비밀번호 입력">
	<span class="toggle-password" onclick="togglePassword()">👁️</span>
</div>

<div class="password-box">
	<input type="password" id="password" placeholder="비밀번호 입력">
	<span class="toggle-password" onclick="togglePassword()">👁️</span>
</div>

function togglePassword() {
	const pwInput = document.getElementById("password");
	const toggleIcon = document.querySelector(".toggle-password");

	if (pwInput.type === "password") {
		pwInput.type = "text";
		toggleIcon.textContent = "🙈"; // 눈 가리는 이모지
	} else {
		pwInput.type = "password";
		toggleIcon.textContent = "👁️"; // 눈 이모지
	}
}

function togglePassword() {
	const pwInput = document.getElementById("password");
	const toggleIcon = document.querySelector(".toggle-password");

	if (pwInput.type === "password") {
		pwInput.type = "text";
		toggleIcon.textContent = "🙈"; // 눈 가리는 이모지
	} else {
		pwInput.type = "password";
		toggleIcon.textContent = "👁️"; // 눈 이모지
	}
}