擬似クラス：Firefoxではアクティブではありません。

Question

現在のところ、スライダーコンポーネントを構築しています。マウスボタンを押したときに擬似クラス：アクティブを適用し、マウスボタンを放すと削除する必要があります。これはChromeで完全に動作しますが、Firefoxではクラスを適用していないようです。

CSS：

.thumb.lower.button.wide:active { 
    background: red; 
    } 

HTML：

<div class="container-fluid"> 

<div class="row"> 

    <div class="col-md-12"> 
     <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4> 
    </div> 

    <div class="col-md-6 p-r-md p-b-md"> 
     <p class="text-black p-b-md">Button Handle - Custom Labels</p> 
     <ux-slider [value]="slider1.value" [options]="slider1.options"></ux-slider> 
    </div> 
</div> 

活字体：

import { Component } from '@angular/core'; 
import { SliderValue, SliderOptions, ColorService, SliderStyle, SliderCalloutTrigger, SliderSize, SliderSnap, SliderType } from 'ux-aspects'; 

@Component({ 
selector: 'app', 
templateUrl: './src/app.component.html' 
}) 
export class AppComponent { 

slider1: SliderExample; 

lowerValue: number = 25; 
upperValue: number = 75; 

constructor(colorService: ColorService) { 

    this.slider1 = { 
     value: 50, 
     options: { 
      track: { 
       ticks: { 
        major: { 
         steps: [0, 50, 100], 
         labels: true, 
         formatter: (value) => { 
          if (value === 0) { 
           return 'Minimum'; 
          } 
          if (value === 50) { 
           return 'Default'; 
          } 
          if (value === 100) { 
           return 'Maximum'; 
          } 
         } 
        }, 
        minor: { 
         show: false 
        } 
       } 
      } 
     } 
    }; 
} 

interface SliderExample { 
    value: number | SliderValue; 
    options: SliderOptions; 
} 

私は角度で働いていますので、私はこの例を供給していますプランカー：https://plnkr.co/edit/q7ixAlVsjNdQb8bA54hE?p=preview

問題の内容と解決方法を教えてもらえますか？ ：アクティブなクラスは、FirefoxではなくChromeでは期待通りに適用されます。

私はすでにActive Pseudo CSS class not working for textbox in Firefox考えられてきたが、私はOPを期待していたので、これは別の問題だと思う：と同じように機能するためにアクティブ：

おかげ

Answer 1

を集中私はクロスコードをチェックして、それから、適切と思われますあなたの終わり。これは、DOMの適用を妨げている要素上のクリックイベントを拘束しているライブラリです。

この問題をgithubに報告し、その時まで@hostlistnersコールバックを使用してこの状況に対処することをお勧めします。

マウスが上下にどのように実装されているかを確認できます。同じaproachを使用し、アクティブなクラスを適用します。

https://github.com/UXAspects/UXAspects/blob/develop/src/components/slider/slider.component.ts