Bootstrap 5 单选按钮更改 NET Core 中的背景颜色

Question

自从迁移到 Bootstrap 5 后，我不再能够通过 CSS 修改来更改背景颜色。

任何人有任何想法来解决这个问题？

Razor 代码示例：

<div class="mb-3" style="margin-top: 1.5em">
<div class="d-flex flex-row">
    <div>
        Conditional Logic:
    </div>
    <div class="custom-control custom-radio form-check form-check-inline ms-2">
        <input checked class="custom-control-input form-check-input" type="radio" name="RadioBtn1" id="customRadio1" value="OR">
        <label class="custom-control-label form-check-label" for="customRadio1">OR</label>
    </div>
    <div class="custom-control custom-radio form-check form-check-inline">
        <input class="custom-control-input form-check-input" type="radio" name="RadioBtn2" id="customRadio2" value="AND">
        <label class="custom-control-label form-check-label" for="customRadio2">AND</label>
    </div>
</div>

CSS 不再工作：

/* Custom Radio Button color before checked */
.custom-control-label::before {
    background-color: #6C757D;
}

我想要的结果是将白色背景更改为更接近主题的背景颜色：

Answer 1

看起来 CSS 有点错误，下面这似乎工作正常：

.custom-control-input {
    background-color: #6C757D;
}

更新的 Razor/HMTL：

<div class="mb-3" style="margin-top: 1.5em">
<div class="d-flex flex-row">
    <div>
        Conditional Logic:
    </div>
    <div class="form-check form-check-inline ms-2">
        <input checked class="custom-control-input form-check-input" type="radio" name="RadioBtn1" id="customRadio1" value="OR">
        <label class="form-check-label" for="customRadio1">OR</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="custom-control-input form-check-input" type="radio" name="RadioBtn1" id="customRadio2" value="AND">
        <label class="form-check-label" for="customRadio1">AND</label>
    </div>
</div>