CSS元素可以實現簡單的密碼顯示與隱藏功能，這對于需要用戶輸入密碼的網站來說非常有用。

/* HTML代碼 *//* CSS代碼 */
#password {
font-size: 16px;
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
outline: none; /* 去除輸入框聚焦時默認的外邊框 */
}
#password::-webkit-input-placeholder {
color: #ccc;
}
#password:focus {
border-bottom: 2px solid #0072c6; /* 輸入框聚焦時底部邊框顏色變化 */
}
#password:focus + .fa-eye-slash {
display: block; /* 輸入框聚焦時“眼睛關閉”圖標顯示 */
}
#password:focus + .fa-eye-slash + .fa-eye {
display: none; /* 輸入框聚焦時“眼睛開啟”圖標隱藏 */
}
.fa-eye {
display: none; /* 初始狀態“眼睛開啟”圖標隱藏 */
}
.fa-eye-slash {
position: relative;
top: -28px;
left: 95%;
display: none; /* 初始狀態“眼睛關閉”圖標隱藏 */
}
.fa-eye-slash:hover {
cursor: pointer;
}

其中，input元素的type屬性設置為password，輸入內容將默認以星號進行顯示。通過CSS偽類選擇器::-webkit-input-placeholder可以修改輸入框占位符的顏色。

在輸入框聚焦時，通過相鄰兄弟選擇器+和偽類選擇器:focus來控制“眼睛開啟”和“眼睛關閉”圖標的顯示和隱藏。

其中，“眼睛開啟”圖標的display屬性初始值為none，鼠標經過時將變換為手指形狀的光標，并設置cursor: pointer;以提高用戶體驗。

通過這些CSS樣式的控制，用戶可以簡單地通過點擊“眼睛”圖標來切換密碼的明文與密文顯示。