:read-only 伪元素针对的非禁用复选框

Question

我现在正在尝试理解一个困扰我一段时间的问题。

我想知道为什么复选框会成为伪元素的目标:read-only，即使没有该disabled属性。

请参阅下面的片段：

input:read-write + label {
  background-color: green;
}

input:read-only + label {
  background-color: red;
}

<!-- an active ( not disabled ) checkbox -->
<input type="checkbox" id="checkbox" />
<label for="checkbox">the checkbox</label>

<br /> 
<br />

<!-- a disabled text -->
<input type="text" disabled id="text"/>
<label for="text">the text</label>

<br /> 
<br />

<!-- an active ( not disabled ) text -->
<input type="text" id="text-active"/>
<label for="text-active">another text</label>

正如您所看到的，复选框和第一个文本输入都是 的目标input:read-only，即使只有第一个文本输入具有该disabled属性。

我做了一些研究并发现了这篇关于该主题的文章，其中指出：

:read-only 是一个 CSS 伪类选择器，它匹配任何与 :read-write 选择器不匹配的元素。

自然地，我对伪选择器进行了研究:read-write，最终出现在mdn 网络文档页面上，其中指出：

:read-write CSS 伪类表示用户可编辑的元素（例如 input 或 textarea）。

我觉得，既然我可以切换复选框的值，它应该被视为“用户可编辑”？

我在某些浏览器中做了一些测试，Firefox（90.0）和Brave（v.1.27.109 Chromium：92.0.4515.115）似乎都有问题。

我还在旧版本的 chrome（版本 89.0.4389.90）中进行了测试，行为并不相同。两个元素都不受:read-only伪元素的影响，第二个文本字段受到read-write伪元素的影响，即使有该disabled属性也是如此。诡异的。

也许我错过了一些明显的东西？

Answer 1

我已经找到了发生这种行为的原因。

根据HTML标准

:read-only 伪类必须与所有其他 HTML 元素匹配。

这里，所有其他 HTML 元素:read-write是指不应用该属性的 html 元素。

:read-write在同一页面上，我们可以看到什么定义了-able的 html 元素。

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

• 应用 readonly 属性且可变的输入元素（即未指定 readonly 属性且未禁用）

• 没有只读属性且未禁用的 textarea 元素

• 正在编辑主机或可编辑且既不是输入元素也不是文本区域元素的元素

这里的相关部分是应用 readonly 属性的输入元素。如果我们检查HTML 标准页面的复选框，我们可以看到该readonly属性确实不适用。

以下内容属性不得指定且不适用于元素：accept、alt、autocomplete、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、maxlength、min、minlength、multiple、pattern、占位符、只读、大小、src、步长和宽度。

:read-write这使得该复选框属于无法应用该属性的 html 元素类别。感知原始问题片段的行为。

虽然这并没有解释如何绕过该行为（请参阅Aditya 的答案），但它解释了为什么会发生这种情况，这是我最初感兴趣的部分。

作为补充说明，我仍然不确定为什么背景颜色在 Chrome 89 中不起作用:read-only。