我现在正在试图理解一个困扰我很久的问题。
我想知道为什么伪元素:read-only会将复选框作为目标，即使没有disabled属性。
请参阅下面的片段：
第一个
正如您所看到的，复选框和第一个文本输入都是input:read-only的目标，尽管只有第一个文本输入具有disabled属性。
我做了一些研究，遇到了这篇文章的主题，其中指出：
：read-only是一个CSS伪类选择器，它匹配与：read-write选择器不匹配的任何元素。
很自然地，我接着对:read-write伪选择器进行了研究，最后得到了mdn web docs page，它声明：
：read-write CSS伪类表示用户可编辑的元素（如input或textarea）。
我觉得，既然我可以切换复选框的值，它应该被认为是“用户可编辑的”？
我已经在一些浏览器做了一些测试，无论是Firefox（90.0）和勇敢（v.1.27.109铬：92.0.4515.115）接缝处有问题。
我也在chrome的旧版本（89.0.4389.90）中测试过，但行为并不一样。两个元素都不受:read-only伪元素的影响，第二个文本字段受read-write伪元素的影响，即使有disabled属性。
也许我错过了什么明显的东西？
2条答案
按热度按时间afdcj2ne1#
我发现了为什么会出现这种现象。
根据HTML标准
：read-only伪类必须与所有其他HTML元素匹配。
这里，* 所有其他HTML元素 * 指的是
:read-write属性不适用的html元素。在同一页上，我们可以看到是什么定义了一个html元素是 *
:read-write-able*。：read-write伪类必须与属于以下类别之一的任何元素匹配，因此对于选择器而言，这些元素被视为用户可更改的：
这里，相关的部分是 * readonly属性适用的input元素 *。如果我们检查HTML标准页面的复选框，我们可以看到
readonly属性，实际上，不适用。以下内容属性不能指定，也不能应用于元素：接受、变更、自动完成、目录名称、表单动作、表单类型、表单方法、表单无验证、表单目的、高度、清单、最大值、最大长度、最小值、最小长度、多重、样式、预留位置、只读、大小、来源、步长和长度。
这使得checkbox福尔斯不能应用
:read-write属性的html元素的类别。虽然这并没有解释如何绕过该行为（请参见Aditya's answer），但它解释了为什么会发生，这是我最初感兴趣的部分。
作为一个补充说明，我仍然不知道为什么它的背景色是不工作的
:read-only元素在铬89。ssgvzors2#
试试这个
第一个
您可以在css中使用
disabled来代替read-only。根据您的问题，您需要更改禁用输入的样式，但由于您使用的是
:read-only，这意味着设置为只读的输入已更改！第一次
查看此WebPage阅读更多about Readonlys
结论？只读和禁用输入之间存在差异。