Bootstrap 5 Radio Button 在 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>

Bootstrap 5 Radio Button 在 NET Core 中改变背景颜色

Bootstrap 5 Radio Button change Background Color in NET Core

css

razor-pages

bootstrap-5

asp.net-core-5.0