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表单中收集数据。复选框是一种方便易用的用户界面元素,可以增强用户交互性。