pointer-events: none と cursor: not-allowed を同時に使う

やりたいこと

一部機能の提供廃止に伴い、既存のボタンをクリックできないようにする。
また、そのボタンがクリックできないことを視覚的にもわかりやすくしたい。

最初に調べたこと/やったこと

• ボタンのクリックをできなくする
  • pointer-events: noneというCSSを使えば一発らしい。（JSかなんかでやると思ってた）
• クリックできないことを視覚的にわかりやすくする
  • cursor: not-allowedというCSSを使う。

そして最初に書いたコードがこちら。

<style>
.done {
    pointer-events: none;
    cursor: not-allowed;
}
</style>

<button class="done">実行</button>

しかし、これだとクリックはできないけどポインターは通常通り、、、
つまり、cursor: not-allowed;が効いてない。
CSSを指定する順番かな？って入れ替えてみたけど、結果は変わらず。

修正後

上記の通り、なかなかできず苦戦しましたが、色々調べて最終的に成功したソースコードがこちら。

<style>
.done {
    cursor: not-allowed;
}
.done button {
    pointer-events: none;
}
</style>

<div class="done">
    <button>実行</button> 
</div>

どうやら、親要素を作ってCSSを別の要素につける必要があるらしいです。
そんなん自力じゃたどり着けない、、、

レビュー後

最終的にこんな感じのコードになりました。
他にもいろいろなCSSをつけましたが、社内のガイドラインなので最低限の雰囲気が伝わる感じで、、、

<style>
.done {
    cursor: not-allowed;
}
.done button {
    pointer-events: none;
    opacity: 0.4;
}
</style>

<div class="done">
    <button>実行</button> 
</div>

そう、もうボタンの透明度を変えて一目でクリックできないことが分かるようにしてしまうという。
cursor: not-allowed;を使うまでもなくわかりやすい方法がありました。

参考

• https://stackoverflow.com/questions/46665625/how-to-combine-cursor-not-allowed-and-pointer-events-none