时间戳

首页 > 解决方案 > :read-only 伪元素所针对的非禁用复选框

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

问题描述

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

我想知道为什么复选框会被伪元素作为目标: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属性也是如此。奇怪的。

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

标签： htmlcss

解决方案

我找到了为什么会发生这种行为。

根据HTML 标准

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

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

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

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

  • 应用了 readonly 属性并且是可变的输入元素（即没有指定 readonly 属性并且没有被禁用）

  • 没有 readonly 属性且未被禁用的 textarea 元素

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

此处的相关部分是适用于 readonly 属性的输入元素。如果我们检查HTML 标准页面的 checkboxes，我们可以看到该readonly属性确实不适用。

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

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

虽然这并没有解释如何绕过这种行为（参见ADITYA 的回答），但它解释了它发生的原因，这是我最初感兴趣的部分。

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

推荐阅读