按钮类型 CSS 和禁用按钮样式答案

【问题标题】：Button type CSS and disabled button styling按钮类型 CSS 和禁用按钮样式
【发布时间】：2014-04-21 23:12:33
【问题描述】：

这是我的按钮示例：

<button id="question_1a" disabled">Next question</button>

我希望将按钮样式作为标准，如果它们被禁用，则使用不同的 background-color：

input[type=button][disabled]{
    background-color:#CCC;
}
input[type=button]{
    background-color: #6CB300;
    color:#fff;
    border:0;
    font-size:1.5em;
    padding:2% 3%;
}

这似乎不对，如何选择禁用按钮和正常按钮？

【问题讨论】：

Francesca, this post 可能有助于澄清:disabled 伪类和[disabled] 属性选择器之间的区别。

标签： html css css-selectors

【解决方案1】：

首先，您应该删除<button>开始标记末尾的多余引号"：

<button id="question_1a" disabled">Next question</button>
<!--                      Here --^                    -->

其次，由于您使用的是<button> 元素，因此您应该使用button[disabled] 选择器来选择禁用的按钮。

Example Here.

button[disabled] {
    background-color:#CCC;
}

但是有一个名为:disabled 的伪类代表任何禁用的元素。您可以使用button:disabled 选择器来获得相同的结果：

button:disabled {
    background-color:#CCC;
}

Example Here.

来自MDN：

:disabled CSS 伪类表示任何禁用的元素。一个如果元素无法激活（例如选中、单击），则元素被禁用 on 或接受文本输入）或接受焦点。该元素还具有启用状态，在此状态下可以激活或接受焦点。

值得注意的是，IE9+支持:disabled伪类

【讨论】：

【解决方案2】：

您可以这样选择它们：

input[type=button]:disabled{
    background-color:#CCC;
}
input[type=button]{
    background-color: #6CB300;
    color:#fff;
    border:0;
    font-size:1.5em;
    padding:2% 3%;
}

另外，您的 HTML 有一个额外的引号。应该是：

<button id="question_1a" disabled>Next question</button>

【讨论】：

我试过了，但奇怪的是它似乎根本没有为我的按钮设置样式：francesca-designed.me/quiz/quiz.php
您没有针对您的按钮。您的目标是具有类型按钮的输入。您需要将 CSS 更改为样式按钮而不是输入才能使其正常工作。此外，您应该查看 Hashem Qolami 的答案以获得更多说明。

【解决方案3】：

input[type="button"]:disabled {}

【讨论】：

【解决方案4】：

在您的 html 中，您有一个 <button> 元素，但在您的选择器中，您匹配 <input>。

然后，将您的 html 更改为 [Demo]

<input type="button" id="question_1a" disabled="disabled" value="Next question" />

或将您的 css 更改为 [Demo]

button{ /* ... */ }
button[disabled]{ /* ... */ }

无论如何，请注意，如果您使用<button> 元素，您也应该为它们设置type="button"，以避免在某些浏览器中出现错误行为。

您可以使用:disabled 伪类代替属性选择器。

【讨论】：