HTML Отключена кнопка get: active CSS Pseudo Class

CSS

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML:

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

Когда я нажимаю кнопку, браузер добавляет кнопку: активное состояние, заставляя его выглядеть так, как будто его щелкали (даже если он отключен). Клянусь, я подумал: активна только добавлена, если кнопка была включена. Что я пропустил?

Ответ 1

Из того, что я могу сказать, :active не исключает элементы :disabled. Вы можете прочитать спецификацию, если хотите.

Чтобы решить вашу проблему, вы можете исключить элементы :disabled путем таргетинга только элементов :enabled с помощью селектора :active:

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

button:disabled {
  opacity: 0.5;
}

Демо: http://jsfiddle.net/Blender/LRvra/1/

Ответ 2

В соответствии с спецификацией CSS3 (:disabled не находится в CSS2.1) нет никаких упоминаний о том, что :active и :disabled являются взаимоисключающими. Возможно, эта часть спецификации нуждается в разъяснении, поэтому UA могут свободно применять псевдоклассы в комбинации.

Я предлагаю вам изменить свои селекторы на более явные:

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

Ответ 3

Вы также можете использовать: not() - дескриптор css:

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

button:disabled {
  opacity: 0.5;
}

Желаю лучшего, Патрик