在網頁設計中，輸入密碼是一個常見的功能，保護用戶信息的安全性。然而，在輸入密碼時，往往會因為看不清密碼內容而反復輸入，導致用戶體驗不佳。為了解決這一問題，可以采用一種新的設計方式——加入一個眼睛圖標，讓用戶可以在輸入密碼的同時查看密碼內容。

/* css代碼 */
.password_container {
position: relative;
}
input[type="password"] {
padding-right: 30px;
}
.password_toggle {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
.password_toggle::before {
display: block;
content: "";
width: 15px;
height: 10px;
border-top: 2px solid #333;
transform: rotate(-45deg);
}
.password_toggle::after {
display: block;
content: "";
width: 10px;
height: 2px;
background-color: #333;
transform: rotate(-45deg);
position: absolute;
top: 7px;
left: 3px;
}
input[type="password"].show_password {
padding-right: 10px;
}
input[type="password"].show_password + .password_toggle::before {
transform: rotate(45deg);
}
input[type="password"].show_password + .password_toggle::after {
transform: rotate(45deg);
top: 5px;
left: 3px;
}

以上是使用CSS實現的一種密碼輸入框的設計方式，使用了偽元素在輸入框側邊添加了一個眼睛圖標。通過點擊圖標，可以切換密碼可見與不可見狀態。

在HTML代碼中，只需要添加一個class為“password_toggle”的span元素，并用JavaScript實現切換輸入框class來實現切換密碼可見與不可見的狀態。

這種密碼輸入框的設計方式，不僅可以方便用戶查看密碼內容，還能增加一定的趣味性和用戶體驗感。在網頁設計中，我們應該注重用戶體驗的提升，并不斷優化設計方式，為用戶提供更好的服務體驗。