CSS中的checkbox是一種可以在HTML表單中添加的復選框。通過在HTML中使用標簽,并將type屬性設置為checkbox,可以創建一個復選框。
<input type="checkbox" name="checkbox1" value="value1"> Checkbox 1
<input type="checkbox" name="checkbox2" value="value2"> Checkbox 2
<input type="checkbox" name="checkbox3" value="value3"> Checkbox 3
復選框(checkbox)允許用戶從一組選項中選擇多個選項。當用戶單擊復選框時,它的狀態將從選中到未選中,或從未選中到選中。可以使用CSS樣式來自定義復選框的外觀。
input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: 20px; height: 20px; background-color: #eee; border-radius: 3px; border: 1px solid #bbb; margin: 0; cursor: pointer; } input[type=checkbox]:checked { background-color: #2196F3; border-color: #2196F3; }
上面的代碼將復選框的外觀設置為一個寬度和高度為20像素的方形,使用灰色背景和邊框。當復選框被選中時,背景顏色和邊框顏色變為#2196F3。
可以通過JavaScript來獲取復選框的狀態。使用以下代碼來檢查是否選中了復選框:
if (document.getElementById("checkbox1").checked) { // 復選框被選中 } else { // 復選框未被選中 }
通過多個復選框,可以讓用戶選擇多個選項,以便在HTML表單中收集數據。復選框是一種方便易用的用戶界面元素,可以增強用戶交互性。