CSS:
button:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
HTML:
<button disabled="disabled">Ok</button>
ボタンをクリックすると、ブラウザはbutton:active状態を追加して、クリックされたように見せます(無効になっている場合でも)。ボタンが有効になっている場合にのみ:activeが追加されたと思ったことを誓います。私は何を逃しましたか?
私の知る限り、:active
は:disabled
要素を除外していません。必要に応じて spec を読むことができます。
問題を解決するには、:disabled
セレクターで:enabled
要素のみをターゲットにすることにより、:active
要素を除外できます。
button:enabled:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
CSS3仕様による (:disabled
はCSS2.1にはありません):active
および:disabled
は相互に排他的です。 UAが自由に疑似クラスを組み合わせて適用できるように、仕様のこの部分を明確にする必要がある可能性があります。
より明確になるようにセレクターを変更することをお勧めします。
button:enabled:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
Cssの:not()記述子を使用することもできます:
button:active:not(:disabled) {
/* active css */
}
button:disabled {
opacity: 0.5;
}
よろしくお願いします、パトリック