4.1 偽類 :checked
CSS 中的表單偽類提供了一些能力來根據元素的狀態進行樣式設定。
這些偽類允許創建互動性和可訪問的表單，改善使用者介面和體驗。
我們將更詳細地討論偽類 :checked, :disabled, :enabled 和 :invalid。
偽類 :checked 應用於那些處於“已選中”狀態的表單元素。這包括複選框
(<input type="checkbox">)、單選按鈕(<input type="radio">) 和選項(<option>)。
語法：
選擇器:checked {
屬性: 值;
}
使用示例
在此示例中，選中的複選框、單選按鈕和選項在處於“已選中”狀態時會獲得相應的背景顏色：
CSS
/* 選中複選框的樣式 */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 選中單選按鈕的樣式 */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 選中選項的樣式 */
option:checked {
background-color: #e74c3c;
}
4.2 偽類 :disabled
偽類 :disabled 應用於那些處於禁用狀態的表單元素。這對於
將樣式套用到那些暫時無法交互的元素非常有用。
語法：
選擇器:disabled {
屬性: 值;
}
使用示例
在此示例中，禁用的輸入框和按鈕會獲得相應的背景色、邊框和文字顏色， 並將游標變更為“禁止”：
CSS
/* 禁用輸入框的樣式 */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 禁用按鈕的樣式 */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 偽類 :enabled
偽類 :enabled 應用於那些處於啟用狀態的表單元素。
這允許您對可交互的元素進行樣式設置。
語法：
選擇器:enabled {
屬性: 值;
}
使用示例
在此示例中，啟用的輸入框和按鈕會獲得相應的背景色、邊框和文字顏色，並將游標變更為“指示器”：
CSS
/* 啟用輸入框的樣式 */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 啟用按鈕的樣式 */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 偽類 :invalid
偽類 :invalid 應用於那些未通過驗證的表單元素。這允許您對
包含不正確數據的輸入框進行樣式設置。
語法：
選擇器:invalid {
屬性: 值;
}
使用示例
在此示例中，無效的輸入框和文字框會獲得相應的邊框色和背景色，以視覺上表示數據未通過驗證：
CSS
/* 無效輸入框的樣式 */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 無效文字框的樣式 */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 完整實現的例子
CSS
/* 選中複選框的樣式 */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 選中單選按鈕的樣式 */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 禁用輸入框的樣式 */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 禁用按鈕的樣式 */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* 啟用輸入框的樣式 */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 啟用按鈕的樣式 */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* 無效輸入框的樣式 */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 無效文字框的樣式 */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單偽類示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION