为何HTML复选框始终具备read-only属性？样式生效原因解析

一、为什么HTML复选框会被识别为具有read-only属性？ #

HTML规范明确规定，复选框（<input type="checkbox">）和单选按钮这类开关型表单控件本身不支持readonly属性——手动给它们添加readonly属性不会产生任何效果，用户依然能正常切换选中状态。

如果你的代码里发现:read-only伪类匹配到了复选框，这是浏览器实现的差异问题：部分浏览器对:read-only伪类的判定逻辑没有严格区分“不支持readonly属性的控件”，错误地把未禁用的复选框归为了“只读”范畴，导致伪类规则被触发。

二、复选框上方显示十字光标的原因 #

你的CSS规则 input:read-only { cursor: crosshair; } 会给所有被:read-only伪类匹配到的输入框设置十字光标。如果复选框显示了这个光标，说明当前浏览器把这个复选框判定为:read-only状态，从而触发了该样式规则。

本质上还是浏览器对:read-only伪类的实现偏差，把本不该匹配的复选框纳入了规则范围。

内容的提问来源于stack exchange，提问作者Ted Scheckler