为什么html复选框总是具有只读属性？

Question

以下内容将在复选框上显示十字准线：

input:read-only {
    cursor: crosshair;
}

<input type="checkbox">

为什么会出现这种情况？

Answer 1

以下是规范所说的内容：

:read-write

伪类必须与属于以下类别之一的任何元素匹配，因此出于选择器的目的，这些元素被认为是用户可更改的：[SELECTORS]

• 应用

  readonly

  属性且可变的输入元素（即未指定

  readonly

  属性且未禁用）
• ⋮

:read-only

伪类必须匹配所有其他 HTML 元素。

readonly

不适用于复选框：

<label><input type="checkbox" readonly> check this out</label>

因此，尽管表面上看起来有点奇怪，但这就是预期的行为。

Answer 2

“

:read-only

CSS 伪类表示用户不可编辑的元素（例如输入或文本区域）。”

另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only

复选框在任何状态下都不可编辑...