您如何定位提交按钮的禁用状态？答案

【问题标题】：How do you target the disabled state of a submit button?您如何定位提交按钮的禁用状态？
【发布时间】：2011-03-07 06:20:35
【问题描述】：

我已经看遍了，无法弄清楚：您如何定位 css 中的禁用状态提交按钮？

例如：我将如何定位和设置此按钮的样式：

<input value="Validate" disabled="disabled" type="submit"/>

【问题讨论】：

“定位到禁用状态的提交按钮”。你能说得更具体点吗？
我猜他想知道如何 CSS 一个灰色的按钮。
是的，我刚刚在上面更新了一个示例按钮

标签： html css forms

【解决方案1】：

你可以使用：

    input[disabled=disabled][type=submit] {
        background:green;
    }

适用于 Firefox，并且据报道在除 IE6 之外的所有设备上都很好。但是我没有亲自测试过这种组合选择器。

PS：更健壮的跨浏览器方法，使用 jQuery...

$("input[disabled=disabled][type=submit]").css
({
    'background':   'yellow',
    'color':        'blue'
});

【讨论】：

请注意@Veger 使用 CSS3 的更现代方法的回答：禁用伪类

【解决方案2】：

在 CSS 中没有为禁用状态定义伪类。

我的猜测是使用 JQuery 来更改禁用按钮的 CSS 类。

JQuery 代码：

<script language="javascript">
    $('input[type=button]').each(function () {
        if ($(this).attr('disabled') == true)
        {
            $(this).addClass('disabled');
        }
    });
</script>

添加样式元素“已禁用”。

【讨论】：

CSS3中有伪类，IE不支持。
+1，由于浏览器支持非常不完整，走 JS 路线似乎是一个不错的解决方案，只要您确定客户端启用了 javascript。
我在使用 Jquery，我该如何实现呢？

【解决方案3】：

input[disabled='disabled'][type='submit']
{
...
}

在 IE 6 中不起作用，但在所有其他浏览器中都可以。 Reference

还有:disabled pseudo-class，但在 IE 中根本不支持。

设计禁用元素的样式很困难，因为它们有时具有无法覆盖的属性。本文展示了哪些样式适用于哪些浏览器：Styling disabled form controls with CSS

【讨论】：

等等，这种样式不都是禁用元素吗？有没有办法专门针对禁用的按钮？_
@Thomas 是的，它会的。应该可以将其与[type='submit'] 结合使用，但我不知道如何诚实。一个类会像这样工作：input.classname[disabled....
@Thomas try [type='submit'][disabled='disabled'] 不保证

【解决方案4】：

CSS3 添加了:disabled 伪类，这正是你想要的。

input:disabled {
 /*Disabled styles for input elements here*/
}

由于this page 显示所有主流浏览器（IE8 除外）都支持此标签，所以它似乎还无法使用（除非您不需要 IE 支持）

【讨论】：

如果您有不需要IE支持的老板或客户，请联系我！ ;-) 我需要几周和大量的统计数据才能被允许放弃 IE6 和 IE7。
呵呵...你确实设法放弃了IE6和IE7，已经省了很多麻烦！

【解决方案5】：

我能想到的一种方法是将按钮的类设置为禁用，然后使用“input.disabled”指定适当的 CSS。在你这样做的情况下这会起作用吗？

【讨论】：

我想过这个问题，但我担心这可能会被工程师认为是糟糕的编码......我永远不知道是什么让这些人失望。
我同意这不是......'nice'，但它是一个非常简单的解决方案。不过，我从来没有在专业的编码环境中工作过，我不知道他们会期待什么！