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

Question

这是我的按钮示例：

<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%;
}

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

Answer 1

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

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

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

示例在这里。

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

然而，有一个伪类被称为:disabled代表任何禁用的元素。您可以使用button:disabled选择器来实现相同的结果：

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

示例在这里。

来自MDN：

在:disabledCSS伪类代表任何禁用元素。如果一个元素不能被激活（例如选择、点击或接受文本输入）或接受焦点，则它被禁用。该元素还有一个启用状态，在该状态下它可以被激活或接受焦点。

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