← 返回 Web 词条Webcheckbox原生支持几个状态同时在场,才比得出差别
复选框
在 Web 上叫Checkbox
<input type="checkbox">
它让用户在一组选项里同时选中零项、一项或多项,每项都可以独立开关。
- 前面可以打勾的小方框
- 能同时勾上好几项的方块
- 点一下出现对号的格子
- 多选框
- 勾选框
- 选择框
示例
(无)
未选中
空心方框
:checked
已选中
填色,里面一个勾
:indeterminate
半选
下属只选了一部分,画一横
:hover
鼠标悬停仅指针
边框变成主色
:focus-visible
键盘选中仅键盘
外面套一圈光环
:disabled
不可用
灰底灰字,点不动
带「仅指针」的状态需要鼠标或触控板:触屏设备上没有悬停这一说,直接就是按下。
带「仅键盘」的状态通常要用 Tab 键走到才出现,鼠标点击一般不显示。
其他平台的相似实现
iOS需自己实现
该平台没有原生实现苹果移动平台没有通用复选框组件,布尔设置通常用开关,多选列表通常用勾选标记表达。
看 iOS 视角 →Android原生支持
Checkbox同名看 Android 视角 →使用规范
什么时候用
- 用户可以独立选择多个项目,且需要一直看见每项的选中状态
什么时候别用
- 只能选一项时应使用单选按钮;单个设置立即生效时移动端更适合开关