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

【问题标题】：non-disabled checkbox being targeted by the :read-only pseudo element:read-only 伪元素所针对的非禁用复选框
【发布时间】：2021-10-06 02:22:23
【问题描述】：

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

我想知道为什么复选框会被伪元素 :read-only 定位，即使没有 disabled 属性。

请参阅下面的 sn-p ：

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 属性。

我做了一些研究，发现this article on the subject 说：

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

当然，我随后对 :read-write 伪选择器进行了研究，最终找到了 mdn web docs page，其中指出：

: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 属性也是如此。很奇怪。

也许我遗漏了一些明显的东西？

【问题讨论】：

有类似问题stackoverflow.com/questions/62754768/…
@ishaba 感谢您的建议，但是，我不确定这个问题是否与我的情况相关，因为我正在使用复选框，但它们不是。
从那个角度来看，任何输入和复选框都没有区别
@ishaba 显然，该行为在输入文本上运行良好，而在复选框中无法正常运行。
哦，对不起，我的错。我现在明白你的意思了。

标签： html css

【解决方案1】：

试试这个

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

input:disabled + label {
  background-color: red;
}

<input type="checkbox" id="checkbox" />
<label for="checkbox">the checkbox</label>

<br /> 
<br />

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

<br /> 
<br />

<input type="text" id="text-active"/>
<label for="text-active">another text</label>

你可以在你的css中使用disabled而不是read-only

根据您的问题，您需要更改禁用输入的样式，但由于您使用的是:read-only，这意味着设置为只读的输入已更改！

input:read-only { background: #121212; color: #fff; }
input:disabled { background: #555; color: #00aeff; }

<input type="text" value="ReadOnly" readonly><br>
<input type="text" value="Disabled" disabled><br>
<input type="text" value="ReadOnly & Disabled" readonly disabled>

查看此WebPage 了解有关 Readonlys 的更多信息

结论？好吧，只读输入和禁用输入之间是有区别的。

【讨论】：

虽然这可以“解决”我的问题，但我并不是在寻找解决方案，真的。我试图了解为什么会发生某种行为。
结帐我已经更新了答案，是的，别忘了给那个打勾的人，保持安全！

【解决方案2】：

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

根据HTML standard

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

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

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

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

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

没有只读属性且未被禁用的文本区域元素

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

这里的相关部分是 readonly 属性应用到的输入元素。如果我们检查HTML standard page for checkboxes，我们可以看到readonly 属性确实不适用。

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

这使得复选框属于不能应用:read-write 属性的html 元素类别。 Hense 原始问题的 sn-p 的行为。

虽然这并没有解释如何绕过该行为（请参阅ADITYA's answer），但它解释了它发生的原因，这是我最初感兴趣的部分。

作为附加说明，我仍然不确定为什么 Chrome 89 中的 :read-only 元素的背景颜色不起作用。

【讨论】：