HTML禁用按钮获取:active CSS伪类

Question

CSS：

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML：

<button disabled="disabled">Ok</button>

当我点击按钮时，浏览器会添加按钮的:active状态，使它看起来像是被点击了（即使它已被禁用）。我发誓我认为只有在按钮启用的情况下才会添加 :active 状态。 我错过了什么？

- Justin Thomas

---

你在哪个浏览器上测试过它？ - Giona

这是一个测试页面：http://jsfiddle.net/Blender/LRvra/ - Blender

不对。看起来 :active 会应用于禁用的按钮。 - Shmiddty

实际上，规范从未说明禁用的控件不能是“活动的”。它只说：“必须防止在用户交互任务源上排队的任何单击事件被分派到元素上的禁用表单控件。” - kapa

Answer 1

据我所知，:active 并没有排除 :disabled 元素。如果您愿意的话，可以阅读 规范文档。

为了解决您的问题，您可以通过仅针对 :enabled 元素来使用您的 :active 选择器以排除 :disabled 元素。

button:enabled:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

演示: http://jsfiddle.net/Blender/LRvra/1/

- Blender

---

你比我快了5秒钟。 - Dai

“:disabled” 不在 CSS2.1 规范中。 - BoltClock

@BoltClock：谢谢，我已经包含了CSS3规范的链接。 - Blender

这似乎在Firefox/最新的Chrome中可以工作。我们无论如何都不支持CSS2.1 :P - Justin Thomas

@Justin Thomas：啊，但是当你支持CSS3时，你实际上也在支持CSS2.1，因为CSS3本质上就是带有花哨功能的CSS2.1。 - BoltClock

Answer 2

根据CSS3规范（:disabled不属于CSS2.1），没有提到:active和:disabled是相互排斥的。可能需要澄清规范的这部分内容，因此UA可以自由地组合应用伪类。建议您修改选择器以更加明确。

button:enabled:active {
    /* active css */
}
button:disabled {
    opacity: 0.5;
}

- Dai

Answer 3

您也可以使用CSS的:not()选择器：

button:active:not(:disabled) {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

祝你们一切顺利，帕特里克。

- Patric S.