CSS密碼切換顯示隱藏

使用CSS可以實現在輸入密碼時，切換密碼是否可見的功能，用戶可以通過點擊按鈕來切換密碼的顯示狀態。以下是實現代碼：

HTML代碼：
<input id="password-input" type="password">
<button id="show-password-button">顯示密碼</button>
CSS代碼：
#password-input[type="password"] {
font-size: 16px;
padding: 10px;
}
#show-password-button {
font-size: 14px;
margin-left: 10px;
padding: 5px 10px;
}
#password-input.show-password[type="text"] {
-webkit-text-security: none;
text-security: none;
}
JavaScript代碼：
var passwordInput = document.getElementById("password-input");
var showPasswordButton = document.getElementById("show-password-button");
showPasswordButton.addEventListener("click", function() {
if (passwordInput.classList.contains("show-password")) {
passwordInput.type = "password";
passwordInput.classList.remove("show-password");
showPasswordButton.innerHTML = "顯示密碼";
} else {
passwordInput.type = "text";
passwordInput.classList.add("show-password");
showPasswordButton.innerHTML = "隱藏密碼";
}
});

以上代碼實現了一個簡單的密碼顯示切換功能。通過給密碼輸入框設置type屬性為password，可以讓輸入的密碼以圓點或星號的形式顯示。而當我們需要查看所輸入的密碼時，可以將type屬性改為text，這樣就可以顯示明文密碼了。而切換按鈕的點擊事件就是控制type屬性的值，以達到顯示/隱藏密碼的目的。