单击时如何更改 Bootstrap 4 默认单选按钮颜色？

【问题标题】：How To Chage Bootstrap 4 Default Radio Button Color When It Is Clicked?单击时如何更改 Bootstrap 4 默认单选按钮颜色？
【发布时间】：2021-10-04 03:58:03
【问题描述】：

这里我有 boostrap4 单选按钮，单击它时具有蓝色背景色。

现在，我要做的是将单选按钮的背景颜色更改为绿色，即当单击单选按钮时，它应该将其颜色更改为绿色。

下面是我的单选按钮

<div class="form-check">
    <label class="form-check-label">
       <input type="radio" class="form-check-input" name="optradio">A. Option1
    </label>
</div>

下面是我的CSS

 .form-check .form-check-input:checked {
    background-color:green !important;
}

【问题讨论】：

标签： c# twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用以下 CSS 分配自定义类：

示例代码：

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #7B1FA2;
}

.custom-control-input:checked~.custom-control-label.red::before {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-check">
  <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="opt1" name="optradio" class="custom-control-input" value="A. Option1">
      <label class="custom-control-label red" for="opt1">A. Option1</label>
  </div>
</div>

【讨论】：