Bootstrap 5 Radio Button изменить цвет фона в NET Core

После перехода на 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;
}

В результате я хочу изменить белый фон ближе к цвету фона темы:

введите здесь описание изображения


css asp.net-core-5.0 razor-pages bootstrap-5
person OJB1    schedule 25.01.2021    source источник
comment
класс .custom-control-label не применяется в вашем html   -  person reusablePants    schedule 25.01.2021
comment
небольшая опечатка, обновил пример кода, но все равно не работает.   -  person OJB1    schedule 25.01.2021
comment
Я не уверен, что это проблема с начальной загрузкой, поскольку попытка сделать то же самое без начальной загрузки также не сработает. Есть ли причина, по которой вы используете селектор ::before? Если вы удалите это, вы должны получить желаемый результат.   -  person reusablePants    schedule 25.01.2021
comment
Я шел по потоку для Bootsrap 4, в котором было 33 голоса в качестве правильного ответа, поэтому можно было бы предположить, что это было решение для Bootsratp 4 - stackoverflow.com/questions/48401587/   -  person OJB1    schedule 25.01.2021
comment
Возможно, в Bootstrap 4 есть потребность в селекторе. Однако в Bootstrap 5 он вам не нужен, и его удаление должно решить вашу проблему.   -  person reusablePants    schedule 25.01.2021
comment
Спасибо за вашу помощь, думаю, теперь все отсортировано... Удалил ::before, но потом обнаружил, что менялась метка, поэтому я поменял указатель CSS на ввод, а не на метку   -  person OJB1    schedule 25.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, 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>

введите здесь описание изображения

person OJB1    schedule 25.01.2021