CSS中的checkbox狀態(tài)是指checkbox的不同狀態(tài),包括未選中狀態(tài)(unchecked)、選中狀態(tài)(checked)和半選中狀態(tài)(indeterminate)。
/* 未選中狀態(tài) */ input[type="checkbox"]:not(:checked) { /* CSS樣式代碼 */ } /* 選中狀態(tài) */ input[type="checkbox"]:checked { /* CSS樣式代碼 */ } /* 半選中狀態(tài) */ input[type="checkbox"]:indeterminate { /* CSS樣式代碼 */ }
在實際開發(fā)中,我們可以通過JavaScript來動態(tài)的改變checkbox的狀態(tài)。比如:
const checkbox = document.querySelector('#checkbox'); checkbox.checked = true; // 改變成選中狀態(tài) checkbox.checked = false; // 改變成未選中狀態(tài) checkbox.indeterminate = true; // 改變成半選中狀態(tài)
CSS中的checkbox狀態(tài)可以與其他CSS樣式一起使用,例如hover(鼠標懸浮狀態(tài)):
/* 鼠標懸浮時 */ input[type="checkbox"]:hover { /* CSS樣式代碼 */ } /* 選中且鼠標懸浮時 */ input[type="checkbox"]:checked:hover { /* CSS樣式代碼 */ } /* 半選中且鼠標懸浮時 */ input[type="checkbox"]:indeterminate:hover { /* CSS樣式代碼 */ }