cr1gger
@cr1gger
Тупые вопросы порождают тупые ответы (с)

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

.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>
  • Вопрос задан
  • 60 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
.payments input[type="radio"]:checked .payments
Сейчас вы сказали браузеру, что нужно найти payments, который лежит внутри чекбокса.
Внутри чекбокса сложно находится.

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

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

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

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

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

плохо, гуглите про доступное скрытие и паттерн visually-hidden.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы