HTML禁用按钮获取:活动CSS伪类

Question

CSS:

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML:

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

当我单击按钮时,浏览器会添加按钮:活动状态使其看起来像被单击(即使它被禁用).我发誓,我想:只有在按钮启用时才会添加活动状态.我错过了什么？

Answer 1

据我所知,:active不排除:disabled元素.如果您愿意,可以阅读规范.

要解决您的问题,您可以:disabled通过仅:enabled使用:active选择器定位元素来排除元素:

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

button:disabled {
  opacity: 0.5;
}