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 ：

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

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

Answer 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>

Answer 3

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

Answer 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伪类而不是属性选择器。

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

4 个答案: