css - Bootstrap 5 Radio Button change Background Color in NET Core

Question

Since moving to Bootstrap 5, I'm no longer able to change the background color with a CSS modification.

Any have any ideas to fix this?

Razor code sample:

<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 no longer works:

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

The result I want is to change the white background nearer to the theme's background color:

question from:https://stackoverflow.com/questions/65891100/bootstrap-5-radio-button-change-background-color-in-net-core

Answer 1

Looks like the CSS was slightly wrong, this below seems to work OK:

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

Updated 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>