在CSS中，我們可以通過測試2個輸入框來學習它的一些屬性和功能。接下來，我們將通過一個示例代碼來測試HTML輸入框的CSS樣式。
<html>
<head>
<style>
input[type="text"] {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: none;
margin-bottom: 10px;
}
input[type="text"]:hover {
border-color: #aaa;
}
input[type="text"]:focus {
outline: none;
border-color: blue;
box-shadow: 0 0 5px rgba(0,0,255,0.5);
}
input[type="password"] {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: none;
margin-bottom: 10px;
}
input[type="password"]:hover {
border-color: #aaa;
}
input[type="password"]:focus {
outline: none;
border-color: blue;
box-shadow: 0 0 5px rgba(0,0,255,0.5);
}
</style>
</head>
<body>
<p>請輸入用戶名</p>
<input type="text" placeholder="請輸入用戶名">
<p>請輸入密碼</p>
<input type="password" placeholder="請輸入密碼">
</body>
</html>在以上代碼中，我們首先定義了一個input[type="text"]和一個input[type="password"]的樣式。它們都具有相同的屬性，例如寬度、內邊距、邊框、邊框半徑、盒子陰影和下邊距。當我們將鼠標懸停在輸入框上時，邊框的顏色將變為#aaa。當輸入框被激活（即被單擊并獲得焦點）時，其邊框的顏色將變為藍色，并具有一個盒子陰影。
雖然這只是一個簡單的測試，但它演示了如何使用CSS屬性來控制輸入框的樣式，并展示了如何調整這些屬性以實現特定的效果。
上一篇css淺紅色的代碼是
下一篇css淺棕色怎么表示