如何更改按钮组中Active/Selected按钮的背景色?
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label id="monthly" class="btn btn-outline-primary" for="btnradio1">Button 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-primary" for="btnradio2">Button 2</label>
</div>
通过使用这个css,未选择的btn颜色得到改变。但是如何更改所选BTN的背景色呢?
.btn-group .btn {
color: #ff60bd;
border-color: #ff60bd;
}
非常感谢!
所选按钮或活动按钮具有活动类,您需要检查“。btn”的“。active”类,如下例所示:
.btn-group .btn.active {
color: #ff60bd;
border-color: #ff60bd;
}
将此代码添加到您的css文件中,然后尝试。首先是隐藏无线电控件,但第二是我认为你需要什么,如果你想改变背景颜色时,按钮是:选中
input[type="radio"]{
display: none;
}
input[type="radio"]:checked + .btn {
color: #fff;
background: #ff60bd!important;
}
input[type="radio"]:hover + .btn {
color: #fff;
background-color: red;
}