html - 按钮类型 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]选择器，以便选择禁用的按钮。

Example Here .

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

但是有一个伪类叫做 :disabled 它代表任何禁用的元素。你可以使用 button:disabled选择器实现相同的结果:

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

Example Here .

来自 MDN :

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

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