CSS ボタンの無効関連

基本

できる限り状況を選ばない内容にしたい
※JSが絡む、設定されている各値をクリアしなくちゃいけない・・・等

方針

・無効用のCSSを別途用意する
・「!important」で強制上書き
・「pointer-events: none;」でクリック無効
・無効用に色を指定（※元のボタンの色を薄くする・・・そんな設定は面倒だからイヤだ）

pointer-events:none;

クリックイベントが無効になるっぽく、JSの制御が不要っぽい。
※念のためにボタンに「disabled="disabled"」をつけといたほうが無難。

必要な内容

・対象ボタンにあわせたマウスカーソルの対応
・対象ボタンをクリックしたときの対応

記述例：白文字、グレーのボタン

.xxx {
  cursor: not-allowed !important; /** ←多分無くて大丈夫 **/
  color: #fff !important;
  background-color: #ccc !important;
  border-color: #ccc !important;

  &:hover {
    cursor: not-allowed !important;
    color: #fff !important;
    background-color: #ccc !important;
    border-color: #ccc !important;
  }

  &:active {
    pointer-events: none; /** クリックの無効 **/

    cursor: not-allowed !important;
    color: #fff !important;
    background-color: #ccc !important;
    border-color: #ccc !important;
  }
}

sassの記述例

.xxx {
  @mixin _btn_disabled {
    cursor: not-allowed !important;
    color: #fff !important;
    background-color: #ccc !important;
    border-color: #ccc !important;
  }

  @include _btn_disabled;

  &:hover {
    @include _btn_disabled;
  }

  &:active {
    pointer-events: none;
    @include _btn_disabled;
  }
}