HTML复选框（）天生不可编辑内容，因此始终匹配 :read-only 伪类，导致如 input:read-only { cursor: crosshair; } 等样式全局生效。
html复选框（``）天生不可编辑内容，因此始终匹配 `:read-only` 伪类，导致如 `input:read-only { cursor: crosshair; }` 等样式全局生效。
在 CSS 中，:read-only 是一个逻辑伪类，用于匹配用户无法修改其值的表单控件。根据 MDN 官方定义，该伪类适用于 <input>、<textarea></textarea> 等元素，当它们“不处于可编辑状态”时即自动匹配。
关键在于：“可编辑”在规范中特指能否修改 value 属性的文本内容。而复选框（及单选框、隐藏域等）的设计语义并非“输入文本”，而是“切换布尔状态”——它没有可被用户键入、粘贴或删除的文本值，其 value 是只读的预设字符串（默认为 "on"），实际交互仅改变 checked 状态。因此，浏览器将所有 <input type="checkbox"> 视为天然 :read-only，无论是否显式声明 readonly 属性（事实上，readonly 对 checkbox 完全无效）。
这解释了为何以下 CSS 会作用于所有复选框：
input:read-only {
cursor: crosshair;
}
即使你写的是 <input type="checkbox">（无任何属性），它也会触发该样式——因为 :read-only 的判定依据是元素类型与交互能力的本质限制，而非 HTML 属性的存在与否。
⚠️ 注意事项：
-
readonly属性对checkbox、radio、hidden、file、select等非文本类输入控件完全无效，添加readonly不会产生任何行为或样式变化； - 若需视觉上禁用复选框但保留提交值，应使用
disabled+ 配套hidden输入（确保服务端接收原始值），并务必在后端校验数据合法性； - 若仅想禁用交互但保持视觉正常（如灰化+禁止点击），推荐使用
pointer-events: none配合自定义aria-disabled="true"，兼顾可访问性； - 切勿依赖
:read-only实现功能控制（如禁用逻辑），它纯属样式钩子；交互控制必须通过disabled属性或 JavaScript 显式干预。
总结：:read-only 是 CSS 对“不可编辑性”的语义映射，而非开发者手动开关。理解这一点，有助于避免误用样式、混淆表单控件行为，并写出更符合规范、更健壮的前端代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
