CSS伪类:checked与:disabled表单元素状态控制实践
:checked用于响应表单选中状态，:disabled控制禁用样式，二者结合可实现无需JavaScript的交互反馈，如自定义复选框、暗黑模式切换及多步表单逻辑，提升用户体验与可访问性。
在Web开发中，表单元素的状态控制是提升用户体验的重要环节。利用CSS伪类 :checked 和 :disabled，开发者可以在不依赖JavaScript的情况下，实现对表单元素的样式响应和交互反馈。下面介绍这两个伪类的实际应用方法。
:checked 伪类 — 控制选中状态
:checked 适用于单选按钮（radio）、复选框（checkbox）和下拉选项（option）等可选控件，用于匹配当前被选中的元素。
- 通过结合标签关联或相邻兄弟选择器，可以实现点击切换样式的效果，例如自定义复选框或开关按钮。
- 常见用法：隐藏默认输入框，用
示例代码：
input[type="checkbox"]:checked + label::before {
background-color: #4CAF50;
border-color: #4CAF50;
}
}
此方式常用于构建无JS的“暗黑模式”切换、菜单展开等交互效果。
:disabled 伪类 — 样式禁用状态
:disabled 匹配所有被设置为 disabled 属性的表单元素，如 input、textarea、button 等。
- 可用于灰化不可操作项，提示用户当前不可编辑或未满足条件。
- 与 :enabled 相对，帮助区分可用与不可用控件，增强可访问性。
实际场景中，常配合 JavaScript 动态添加 disabled 属性，而样式则由 CSS 统一管理：
input:disabled {
opacity: 0.6;
background-color: #f0f0f0;
cursor: not-allowed;
}
组合使用：增强交互反馈
将 :checked 与 :disabled 结合，能实现更复杂的逻辑表现。
- 例如：当某个复选框被选中后，禁用其他选项，并通过样式体现其锁定状态。
- 也可设计多步表单中，前置条件未完成时后续字段保持禁用且不可勾选。
示例：
input[type="radio"]:checked:disabled + label {
color: gray;
text-decoration: line-through;
}
基本上就这些。合理使用 :checked 和 :disabled 不仅减少脚本负担，还能让界面更直观、响应更及时。关键是结构语义清晰，搭配 label 和属性控制，效果更稳定。
