< p >CSS 輸密碼鍵盤< /p >< p >在網站登錄和注冊界面中，密碼輸入框通常都是以星號（*）代替實際密碼。但是，如果使用CSS密碼框，用戶將能夠清晰地看到他們正在輸入的字符，同時能夠區分大小寫。< pre >//CSS代碼
input[type=password] {
font: 1em/1.5 monospace;
letter-spacing: 1px;
background: #fff;
border: none;
color: transparent;
text-shadow: 0 0 0 #000;
}
input[type=password]:focus {
outline: none;
}
input[type=password]:focus ~ .keyboard {
display: block;
}
.keyboard {
position: absolute;
top: 0;
right: 0;
padding: 10px;
background: #fff;
display: none;
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
z-index: 1;
}
.keyboard span {
display: inline-block;
border: 1px solid #ccc;
background: #f9f9f9;
color: #666;
font-size: 1.5em;
font-weight: bold;
padding: 3px;
margin-right: 3px;
margin-bottom: 3px;
cursor: pointer;
}
.keyboard span.small {
width: 50px;
font-size: 1em;
padding: 1px;
margin-right: 1px;
}< p >這個CSS代碼塊包含兩個部分。第一個部分是定義密碼輸入框，其中字體是等寬的，字母間距是1個像素。密碼框的背景是白色的，沒有邊框，文字顏色是透明的，文本陰影是黑色的。第二個部分是定義鍵盤，其中鍵盤是絕對定位的。當密碼輸入框被聚焦時，鍵盤才會顯示。鍵盤的每個按鍵都是一個帶有邊框和背景顏色的字符，點擊每個按鍵會在密碼框中添加相應的字符。< p >這個CSS密碼框可以防止對密碼進行截取或記錄，從而提高用戶的安全性。此外，這個CSS密碼框還可以改善用戶體驗，使用戶更加舒適地輸入密碼。
上一篇css 邊框像素
下一篇mysql死鎖記錄在哪里