CSS復選框是一個常用的表單元素,它允許用戶選擇多個選項。有時候我們希望某個選項在頁面載入時就被默認選中。那么如何在CSS中設置復選框的默認選中狀態呢?
<input type="checkbox" name="option1" id="option1" checked />
在HTML中,可以通過設置checked
屬性來設置復選框的默認選中狀態。但是,如果想要在CSS中控制默認選中狀態,就需要使用特定的CSS屬性。
/* 選中狀態樣式 */ input[type="checkbox"]:checked { /* 樣式 */ } /* 非選中狀態樣式 */ input[type="checkbox"]:not(:checked) { /* 樣式 */ }
以上代碼中,我們使用了:checked
和:not(:checked)
選擇器來分別控制選中和非選中狀態下的樣式。
如果希望在頁面載入時讓某個復選框處于選中狀態,可以使用checked
屬性或者:checked
偽類來實現。
/* 通過checked屬性設置默認選中狀態 */ input[type="checkbox"]#option1:checked { /* 樣式 */ } /* 通過:checked偽類設置默認選中狀態 */ input[type="checkbox"]:checked + label { /* 樣式 */ }
以上代碼中,我們使用ID選擇器和:checked
偽類來控制option1
復選框的默認選中狀態。另外,我們還使用了相鄰兄弟選擇器來控制與其相鄰的label
元素的樣式。
總之,通過一些簡單的CSS樣式設置,我們可以輕松地控制復選框的默認選中狀態,讓用戶的操作更加便利和快捷。