使用JQuery更改Bootstrap 3中的单选按钮颜色

时间:2018-04-09 14:04:51

标签: jquery css twitter-bootstrap-3

所以我有一些单选按钮:

<div class="form-group text-danger">
                <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Is a Remix</label>
                <div class="col-md-8">
                    <div class="admin-form theme-primary">
                        <div class="radio-custom radio-primary mt10 mr10 pull-left text-danger">
                            @Html.RadioButtonFor(m => m.IsRemix, true, new { @class = "control-label col-md-4 text-danger" })
                            <label for="IsRemixYes">Yes</label>
                        </div>
                        <div class="radio-custom radio-primary mt10 pull-left text-danger">
                            @Html.RadioButtonFor(m => m.IsRemix, false, new { @class = "control-label col-md-4 text-danger" })
                            <label for="IsRemixNo">No</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Contains Sample</label>
                <div class="col-md-8">
                    <div class="admin-form theme-primary">
                        <div class="radio-custom radio-primary mt10 mr10 pull-left">
                            @Html.RadioButtonFor(m => m.ContainsSample, true, new { @class = "control-label col-md-4 text-danger" })
                            <label for="ContainsSampleYes">Yes</label>
                        </div>
                        <div class="radio-custom radio-primary mt10 pull-left">
                            @Html.RadioButtonFor(m => m.ContainsSample, false, new { @class = "control-label col-md-4 text-danger" })
                            <label for="ContainsSampleNo">No</label>
                        </div>
                    </div>
                </div>
            </div>

        </div>

我试图添加一个类,但它没有改变颜色,我使用的是主题而不想修改主题css。是否可以使用JQuery?

这是我的CSS:

.radio-custom.radio-primary input[type=radio]:checked + label:after,
.radio-custom.radio-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=radio]:checked + label:after {
  background-color: #4ea5e0;
  color: #4ea5e0;
}
.checkbox-custom.fill.checkbox-primary label:before {
  background-color: #4ea5e0;
}

1 个答案:

答案 0 :(得分:0)

您可以非常轻松地使用jQuery。我假设复选框将是某种伪复选框以允许样式,因此您可能需要非常具体的选择器和样式(查看现有的CSS和浏览器检查器将有助于此,)但是要更改样式,可以在页面上使用jQuery:

$(function () {
    $(".radio-custom").css("background-color", "yellow");
});

如果您在css中设置为!important的{​​{1}},则可以使用此方法接受第三个优先级参数:

css