禁用输入的 CSS 选择器 type="submit"

Posted 2023-05-08

【中文标题】禁用输入的 CSS 选择器 type="submit"

【英文标题】：CSS selector for disabled input type="submit"

【发布时间】：2011-04-15 03:40:37

【问题描述】：

是否有用于禁用 input type="submit" 或 "button" 的 CSS 选择器？

我应该只使用input[type="submit"][disabled]吗？

这在 IE6 中有效吗？

【问题讨论】：

:disabled 在 CSS3 中可能会更好。但是 IE 都不支持，所以你需要一个备份类。

谢谢，好点子，但我现在打算远离 CSS3。

开发人员真的需要停止尝试支持 IE6。网站所有者/管理者真的需要停止要求开发人员支持它。加油，IE9 即将问世！

好吧，考虑到我的客户端 24% 的用户来自 IE6，我现在可悲的是不能忽略它。 IE9 很棒，但它不适用于 Windows XP。

如今 24% 高于 IE6 的平均水平，但如果您有需要处理的那种统计数据，则可以。但这并不意味着您必须使所有内容看起来都很完美，只要功能有效。对于它的价值，我们看到大约 17%，我们已决定在即将进行的网站改造中积极放弃对它的支持。

【参考方案1】：

这在 IE6 中有效吗？

不，IE6 根本不支持属性选择器，参见。 CSS Compatibility and Internet Explorer.

您可能会发现 How to workaround: IE6 does not support CSS “attribute” selectors 值得一读。

---

编辑如果您要忽略 IE6，您可以这样做 (CSS2.1)：

input[type=submit][disabled=disabled],
button[disabled=disabled] 
    ...

CSS3 (IE9+)：

input[type=submit]:disabled,
button:disabled 
    ...

您可以将[disabled=disabled]（属性值）替换为[disabled]（属性存在）。

【讨论】：

好的，谢谢。但是如果我要忽略IE6，那将如何实现呢？ input[type="button"[disabled] 会是标准的吗？

再次感谢第一个链接，CSS 兼容性和 Internet Explorer - 优秀文章，即时书签。

@SuperUberDuper 基于属性的方法适用于 IE8（既不是 IE6 也不是 IE9+）。 IE7 和 IE8 都支持 some CSS2.1 和 CSS3 选择器，属性值/存在就是其中之一。

【参考方案2】：

正如 jensgram 所说，IE6 不支持属性选择器。你可以添加一个 class="disabled" 来选择禁用的输入，这样它就可以在 IE6 中工作。

【参考方案3】：

我使用@jensgram 解决方案来隐藏包含禁用输入的 div。所以我隐藏了输入的整个父级。

代码如下：

div:has(>input[disabled=disabled]) 
    display: none;

也许它可以帮助你们中的一些人。

【参考方案4】：

这是在 2021 年。这是 css 选择器，它在 Chrome 和 Edge 上对我有用（IE 似乎不再受支持：https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/）：

input[type=submit]:disabled 
    background-color: #4a4a4a;