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が追加されたと思ったことを誓います。私は何を逃しましたか?

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.