为什么 :read-only CSS pseudo-class 应用于此复选框？

Question

我有以下 SCSS 代码：

input[type="checkbox"] {
    ...
    &:read-only, &[readonly] {
        cursor: default;
        filter: grayscale(1);
    }
}

正在应用于
<input type="checkbox" id="checkbox" onChange={this.rememberMe} />

以下 MDN: :read-only 文档：

it will select any element that cannot be edited by the user.

为什么我的可编辑输入应用了它？

该问题适用于 Firefox 和 Chrome。

Answer 1

因为 <input type="checkbox" /> 和 <input type="radio" />（以及大多数其他元素）本质上是只读的。
与 <input type="text" /> 或 <input type="date" /> 不同，当您与复选框或单选按钮交互（即切换）时，您不会更改其 value，而是更改其 checked状态。
是的，我同意这是违反直觉的。

因此...

您不应出于任何目的将<input readonly属性应用于radio或checkbox。
- 因为它不会做任何有用的事情。
你不应该定义一个CSS select或者使用:read-only伪class到select <input> 个具有显式 HTML <input readonly 属性集的元素。
- 而是使用 has-attribute-select 或者：input[readonly].
- 完全避免使用 :read-only 伪 class 可能是个好主意 because it also selects pretty-much every HTML element on the page too; a function with little practical utility, imo.

来自当前的 WHATWG HTML 规范（强调我的，尤其是最后一点）：

https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only

The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

<input> elements to which the <input readonly attribute applies, and that are mutable (i.e. that do not have the <input readonly attribute specified and that are not <input disabled).

<textarea> elements that do not have a <textarea readonly attribute, and that are not <textarea disabled.

elements that are editing hosts or editable and are neither <input> elements nor <textarea> elements.

[i.e. contenteditable]

The :read-only pseudo-class must match all other HTML elements.

现在，如果您想要一个“只读checkbox/radio”那么您没有太多good 选项，不幸的是；相反，您混合了 糟糕的选择 和勉强合适的选择...:[=78=]

There is this popular QA, however most of the highest-voted answers have suggestions that I think are bad ideas: such as depending upon a client-script to block user-interaction _{...very imperfectly（来自不知道单选框和复选框的操作方式远不止 onclick 的人）}，或使用 CSS 的 pointer-events: none; 而 完全无视计算机键盘既存在又被人类计算机操作员经常使用的事实 .
我认为最差的建议是使用 <input type="checkbox/radio" disabled />、as demonstrated with this answer. (The <input type="hidden"> is necessary because disabled (and unchecked) inputs are not submitted, which is another violation of the principle of least astonishment 由 1990 年代后期的新兴浏览器供应商使用。

如果你想在所有 input 元素上使用 :read-only 伪 class 除了单选框和复选框，那么你需要考虑仔细（并测试它，在浏览器的控制台中使用 document.querySeletorAll("input:read-only") 的变体！）

我建议您不要应用任何使用 select 或 input 元素的样式，而无需同时显式指定 [type=""] 属性 selector - 这是因为具有 select 或类似“input”（没有任何属性 -selectors）的样式将应用于未来的 HTML 输入元素我们还不知道，可能会在不久的将来的任何时候引入，也许下周 Google Chrome 添加一个新的 <input type="human-dna-sample" /> 或微软添加 <input type="clippy" /> 到他们的 Edge 浏览器的特别 retro 版本 - 所以你肯定不希望将 :read-only 样式应用于这些元素，直到你至少知道它的外观和工作方式- 因此浏览器将使用它的 default/native 样式，如果他们在某个时候碰巧在您的网站上遇到它，它不会违反您的 users/visitor 的期望。

...所以这意味着你需要为每个已知的 <input type="..."> 写出规则作为重复的 input[type=""] 样式规则，现在你可能想知道是否有伪 classes for input elements based on their default native appearance because a lot of them sure do look shares similar, if not identical, native appearance and visual-semantics (and shadow DOM structure, if applicable) -例如在桌面 Chrome 中，输入类型 text、password、email、search、url、tel 等等所有这些显然都是围绕同一个原生 textbox 小部件构建的，因此 surely 必须是针对不同输入“种类”的伪 class，正确的？像 input:textbox-kind 代表 text、password 等，input:checkbox-kind 代表 checkbox 和 radio - 不幸的是这样的事情不存在，如果明天介绍 W3C 的 CSS 委员会可能至少在几年内不会批准它 - 所以在那之前我们需要明确列举 every input[type=""] 我们知道这样我们就可以准确地预测浏览器将如何使用我们的 type=""-specific 样式规则来呈现它们，而不是将所有内容都作为 input {} 并查看什么是坚持。

...幸好没有too long，所以我刚才把规则写出来了：

随意复制粘贴；它几乎没有版权。 _{而且我想看看这在我有生之年在互联网上传播了多远}。

底部是一个 CSS select 或者 select 只有 <input 个 来自未来 的元素通过使用一组详尽的 :not([type="..."]) select 或不匹配具有空 type="" 属性或完全缺少属性的 input 元素。

/* Textbox-kind: */ 
input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="search"]:read-only,
input[type="tel"]:read-only,
input[type="url"]:read-only,
input[type="email"]:read-only,
input[type="number"]:read-only {
    background-color: #ccc;
    cursor: 'not-allowed';
}

/* Date/time pickers: */ 
input[type="date"]:read-only,
input[type="datetime-local"]:read-only,
input[type="time"]:read-only,
input[type="week"]:read-only,
input[type="month"]:read-only {
    background-color: #ccc;
    cursor: 'not-allowed';
}

/* Button-kind (these are all practically obsolete now btw, as the <button> element is far, far, far superior in every way) */
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
input[type="image"]:disabled {
    background-color: #ccc;
    border: 1px outset #666;
    cursor: 'not-allowed';
    color: #666;
    text-shadow: 0 1px rgba(255,255,255,0.2);
}

/* Checkbox-kind (Don't use `:read-only` with these): */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    /* I'm not setting any properties here because it's impossible to effectively style these elements without resorting to image-replacements using the `:checked` state in selectors for their parent or adjacent `<label>` or ::before/::after` of other proximate elements. */
}

/* Weird-stuff-kind: */ 
input[type="color"]:read-only,
input[type="file"]:read-only,
input[type="hidden"]:read-only,
input[type="range"]:read-only {
    /* Again, due to differences in how different browsers and platforms display (and consequently style) these inputs I don't think it's worth doing anything. */
}

/* If you **really** want to select _future_ <input> elements in-advance... do this: */

input[type]:not([type="text"]):not([type="password"]):not([type="search"]):not([type="tel"]):not([type="url"]):not([type="email"]):not([type="number"]):not([type="date"]):not([type="datetime-local"]):not([type="time"]):not([type="week"]):not([type="month"]):not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {

}

为什么 :read-only CSS pseudo-class 应用于此复选框？

Why is :read-only CSS pseudo-class being applied on this checkbox?

html

css

sass

jsx

reactjs

为什么我的可编辑输入应用了它？