web-dev-qa-db-ja.com

HTML無効ボタン取得：アクティブCSS疑似クラス

CSS：

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML：

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

ボタンをクリックすると、ブラウザはbutton：active状態を追加して、クリックされたように見せます（無効になっている場合でも）。ボタンが有効になっている場合にのみ：activeが追加されたと思ったことを誓います。私は何を逃しましたか？

htmlcsscss-selectorspseudo-class
15
Justin Thomas

私の知る限り、:activeは:disabled要素を除外していません。必要に応じて spec を読むことができます。

問題を解決するには、:disabledセレクターで:enabled要素のみをターゲットにすることにより、:active要素を除外できます。

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

button:disabled {
  opacity: 0.5;
}

デモ： http://jsfiddle.net/Blender/LRvra/1/

32
Blender

CSS3仕様による （:disabledはCSS2.1にはありません）:activeおよび:disabledは相互に排他的です。 UAが自由に疑似クラスを組み合わせて適用できるように、仕様のこの部分を明確にする必要がある可能性があります。

より明確になるようにセレクターを変更することをお勧めします。

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

Cssの：not（）記述子を使用することもできます：

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

button:disabled {
  opacity: 0.5;
}

よろしくお願いします、パトリック

0
Patric S.