Question

我有一个输入，它有两个背景颜色的类，我需要覆盖它。我正在尝试这样做：将该输入放在外部容器中，并且（使用javascript）我将该容器的类更改为所需的容器。

输入有两个类，正如我所说，那些类是我需要改变的类：irs-line和irs-bar。这两个类有自己的背景颜色。我需要红色和黄色。我将通过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，所以使用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;
}

我必须根据externala操作更改输入类（某些单选按钮会通过javascript更改条形和线条的颜色）

默认案例：http://jsfiddle.net/h307fdau/ 红色案例：http://jsfiddle.net/mxt78oa5/

Answer 1

考虑您最新的HTML＆amp; CSS小提琴编辑，我建议使用以下jQuery：

1.保持这些CSS类以最好地隔离所需的background-color属性，就像在评论中的共享小提琴中所做的那样：

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

2.这个jQuery将根据广播input选择＆amp;添加或删除颜色类。删除任何颜色，如果它们匹配＆＃34;实际＆＃34;滑块上的字符串值：

$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

覆盖背景色（css）

1 个答案: