提问者:小点点

Bootstrap BTN-组更改颜色


如何更改按钮组中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;
}

非常感谢!


共2个答案

匿名用户

所选按钮或活动按钮具有活动类,您需要检查“。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;
}