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

【问题标题】：Bootstrap 5 Radio Button change Background Color in NET CoreBootstrap 5 单选按钮更改 NET Core 中的背景颜色
【发布时间】：2021-01-25 19:20:28
【问题描述】：

自从迁移到 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;
}

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

【问题讨论】：

.custom-control-label 类未应用到您的 html 中
小错字，已更新代码示例但仍然无法正常工作。
我不确定这是一个引导问题，因为在没有引导的情况下尝试同样的方法也行不通。您使用 ::before 选择器是否有原因？如果你删除它，你应该得到想要的结果。
我正在为 Bootsrap 4 提供一个线程，该线程有 33 个投票作为正确答案，所以有人会认为这是 Bootsratp 4 的解决方案 - stackoverflow.com/questions/48401587/…
可能在 bootstrap 4 中需要选择器。但是，在 Bootstrap 5 中，您应该不需要它，删除它应该可以解决您的问题。

标签： css razor-pages bootstrap-5 asp.net-core-5.0

【解决方案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>

【讨论】：