Как при checked изменить блок?

Question

[Vladislav]

.payments input[type="radio"]:checked .payments {
        border: 1px solid blue;
    }

    .payments {
        display: inline-block;
        border: 1px solid grey;
        padding: 10px;
        max-width: 250px;
        border-radius: 8px;
        min-height: 120px;
    }

    .payments input[type="radio"] {
        /* display: none; */
    }

<div class="radio payments">
                                <label>
                                    <input type="radio" name="type_pay" id="free_kassa" value="free_kassa" checked>
                                    Option one is this and that&mdash;be sure to include why it's great
                                </label>
                            </div>

Answer 1

[Ankhena]

.payments input[type="radio"]:checked .payments
Сейчас вы сказали браузеру, что нужно найти payments, который лежит внутри чекбокса.
Внутри чекбокса сложно находится.

В CSS можно выбрать только блоки, которые лежат после элемента или внутри.

Родителя можно покрасить только на js.

Можно сделать костылик в виде доп.элемента, который в коде будет после инпута и примерять стили к нему. А задать ему абсолют так, чтобы казалось, что рамка покрасилась у родителя.

Например, так на чистом css https://jsfiddle.net/642j1vh5/

И это:

.payments input[type="radio"] {
  /* display: none; */
}

плохо, гуглите про доступное скрытие и паттерн visually-hidden.

Comments

[Vladislav]

крч без JS не обойтись да ?
просто тут я тестил, работает https://jsfiddle.net/xfnd07tp/7/

[Ankhena]

Владислав, я написала и вариант с css

[Vladislav]

Ankhena, сделал как ты сказала за счет after на лейбле. но на jsfiddle работает а у меня на сайте не работает. Почему так подскажи: https://stock-likes.ru/panel/balance (логин и пароль habr:habr) мне кажется что то конфилктует но не понимаю что

[Ankhena]

Владислав, провалился из-за z-index.
Можно убрать z-index и поставить pointer-events либо задать z-index для payments

[Vladislav]

Ankhena, спасибо большое. поставил z-index 0 для payments

Answer 2

[Tim]