Как задать стили обертке, когда состояние input в cheked?

Question

[Vladislav]

Как задать стили обертке, когда состояние input в cheked? При чеке на инпут радио враперу должен задаваться фон, но как? html

<div class="radio">
                            <input class="radio-custom-input" name="car" type="radio" id="pickup">
                            <label class="radio-custom-label" for="pickup">Самовывоз из магазина <p> ул. Бебеля 17</p></label>
                            <div class="form-order__delivery">
                                <p>Стоимость:<span>бесплатно</span></p>
                            </div>
                        </div>

стили

.radio
    display: flex
    position: relative


    label
        width: 100%
        margin-bottom: 0 !important

.radio+.radio
    margin-top: 8px    

.radio
    padding: 23px 17px
    border: 1px solid $darken-mid-blue
    border-radius: 5px
  
.radio-custom-label
    padding-left: 25px
    font-size: 1rem
    color: #444
    cursor: pointer

.radio-custom-input
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    position: absolute


.radio-custom-label:before
    content: ""
    display: block
    width: 19px
    height: 19px
    border: 2px solid $blue
    background-color: #fff
    border-radius: 50%
    position: absolute
    top: 35%
    left: 17px
    z-index: 1
    transition: border .1s linear

.radio-custom-label:after
    content: ""
    display: block
    width: 11px
    height: 11px
    background-color: $blue
    border-radius: 50%
    opacity: 0
    position: absolute
    top: 39%
    left: 21px
    z-index: 2
    transition: opacity .1s linear



.radio-custom-input:checked .radio
    background-color: $light-bright-blue


.radio-custom-input:checked + .radio-custom-label:after
    opacity: 1

Answer 1

[Ankhena]

1. На JS
2. Применять стиль не к обертке, а к псевдо от лейбла. Этот псевдо сделать абсолютом, а релатив задать обертке.
Тогда визуально будет казаться, что покрасилась обертка.

Comments

[Vladislav]

стили

.radio-custom-input:checked .radio-custom-label
    background-color: $light-bright-blue

сам dom так не робит или я не вверно написал?

[Ankhena]

Vladislav,
Вы написали, что лейбл лежит внутри инпута. Забыли плюс или тильду.
Псевдоэлемент потеряли вовсе.

Еще p нельзя вставлять в label.
Проверяйте код валидатором.

[Vladislav]

Ankhena, плюс помог спасибо