バックグラウンドカラーを上書きする（CSS）

Question

私は上書きする必要があるバックグラウンドカラーの2つのクラスを持つ入力を持っています。私はこれをやろうとしている：外部のコンテナにその入力を入れ、（javacriptで）そのコンテナのクラスを欲望のクラスに変更する。

私が言ったように、入力には2つのクラスがあります。これらのクラスは、私が変更する必要があるものです：irs-lineとirs-bar。それらの2つのクローズは独自の背景色を持っています。私は赤と黄色でそれらが必要です。いくつかのラジオボタンの値を使って、JavaScriptのクラスの変更をトリガーします。 （それはまた別の話だ）

私の質問で、いくつかのフォーラムでは、男は私にこのヒントを与える：

.container.color-yellow .irs-line { 
    background-color: yellow; 
} 
.container.color-red .irs-line { 
    background-color: red; 
} 

をしかし、私はそれがどのように動作するかわからないか、私は入力でこれらのクラスを使用する方法。どんな助け？

<div className="uk-width-1-4"> 
    <input type="text" name="timewmsslider" ref="timewmsslider" /> 
</div> 

それはとても、Reacjsだ：これは私が入力を呼ぶ私のコードです

：（私は彼が何をしようとしていたものをその人に頼むだろうが、私はできません）

UPDATE ref = "timewmsslider"は、入力がデフォルトのirs-barおよびirs-lineクラスでどのように定義されているかを示します。

入力はデフォルトのirc-lineとirc-barのCSSクラスで生成されています。だから、CSSでこのクラスを持っているとどうすればいいですか（赤と黄の両方の色）？

.irs-line-yellow { 
    height: 16px; 
    top: 24px; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
    background: #e9d759; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e9d759 0%,#e9e459 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0); /* IE6-9 */ 
    position: relative; 
    display: block; 
    overflow: hidden; 
    outline: 0!important; 
} 

.irs-bar-yellow { 
    height: 16px; 
    top: 24px; 
    margin-left: -7px; 
    padding-right: 5px; 
    background: #e9d759; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e9d759 0%,#e9d759 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0); /* IE6-9 */ 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 0; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
} 

.irs-bar-red { 
    height: 16px; 
    top: 24px; 
    margin-left: -7px; 
    padding-right: 5px; 
    background: #e95959; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e95959', endColorstr='#e95959',GradientType=0); /* IE6-9 */ 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 0; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
} 
.irs-line-red { 
    height: 16px; 
    top: 24px; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
    background: #e95959; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e95959', endColorstr='#e95959',GradientType=0); /* IE6-9 */ 
    position: relative; 
    display: block; 
    overflow: hidden; 
    outline: 0!important; 
} 

私は（いくつかのラジオボタンではJavaScriptを経由してバーや線の色を変更します）externalaアクションに応じて、これらのものと入力クラスを変更する必要が

デフォルトの場合：http://jsfiddle.net/h307fdau/ レッドケース：http://jsfiddle.net/mxt78oa5/最高のNEを隔離するためにこれらのCSSクラス1.Keep

：

Answer 1

最新のHTML & CSSのフィドルの編集を考えると、私は次のjQueryをお勧めしたいですあなたがコメントで共有フィドルで行ったようにbackground-colorプロパティをeded：

.red {background-color: red;} 
.yellow {background-color: yellow;} 

2.このjQueryのは、彼らがスライダーに「実際の」文字列値と一致した場合に任意の色を削除するラジオinput選択&によるカラークラスを追加または削除します。

$range.on("change", function() { 
    //store slider & radio inputs values 
    var value = $(".js-range-slider").prop("value"); 
    var radioColor = $(".extra-controls input[type=radio]:checked").val(); 
    //if value matches actual remove colors 
    if (value == 'actual') { 
     $(".irs-line").removeClass(radioColor); 
     $(".irs-bar").removeClass(radioColor); 
     //prevent bottom line from coloring on slider actual date 
     $("#escenario-moderado").on("change", function() { 
      $(".irs-line").removeClass("yellow"); 
      $(".irs-bar").removeClass("yellow"); 
     }); 
     $("#escenario-severo").on("change", function() { 
      $(".irs-line").removeClass("red"); 
      $(".irs-bar").removeClass("red"); 
     }); 
    } 
    //else add the default radio input selected color 
    else { 
     $(".irs-line").addClass(radioColor); 
     $(".irs-bar").addClass(radioColor); 
     //add manually selected radio color 
     $("#escenario-moderado").on("change", function() { 
      $(".irs-bar").addClass("yellow"); 
      $(".irs-line").addClass("yellow"); 
      $(".irs-line").removeClass("red"); 
      $(".irs-bar").removeClass("red"); 
     }); 
     $("#escenario-severo").on("change", function() { 
      $(".irs-line").addClass("red"); 
      $(".irs-bar").addClass("red"); 
      $(".irs-bar").removeClass("yellow"); 
      $(".irs-line").removeClass("yellow"); 
     }); 
    } 
}); 

Working JSFiddle