Задать вопрос
@Agzamikail
html

Как изменять цвет выбранного блока?

Как изменить цвет выбранного блока, чтобы после клика на блок менялся цвет всего блока?

Я пытался сделать через .option input:checked + span но это меняет только цвет текста, а не блока

659405a1d8b34408935277.png

659405ab25372157000864.png

Код
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тестовая страница</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .quiz-container {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 400px;
            text-align: center;
        }

        .question {
            font-size: 20px;
            margin-bottom: 20px;
            color: #333333;
        }

        .options {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .option {
            margin: 10px 0;
            padding: 15px;
            border: 1px solid #007bff;
            border-radius: 5px;
            width: 100%;
            box-sizing: border-box;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
        }

        .option span {
            font-size: 16px;
            color: #555555;
            flex-grow: 1;
            padding-left: 10px;
            cursor: pointer;
        }

        .option:hover {
            background-color: #e6f7ff;
        }

        .option input {
            display: none; /* Скрыть стандартные радиокнопки */
        }

        .option input:checked + span{
            font-weight: bold;
            background-color: #33ff52;
        }

 

        .submit-btn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 18px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<div class="quiz-container">
    <div class="question" id="question">Какой язык программирования вы изучаете?</div>

    <div class="options">
        <label class="option">
            <input type="radio" name="answer" value="html">
            <span>HTML</span>
        </label>
        <label class="option">
            <input type="radio" name="answer" value="css">
            <span>CSS</span>
        </label>
        <label class="option">
            <input type="radio" name="answer" value="js">
            <span>JavaScript</span>
        </label>
    </div>

    <button class="submit-btn" onclick="checkAnswer()">Проверить ответ</button>
</div>

<script>
    function checkAnswer() {
    const answerElements = document.getElementsByName('answer');
    let selectedAnswer = null;

    for (const element of answerElements) {
        if (element.checked) {
            selectedAnswer = element.value;
            break;
        }
    }

    if (selectedAnswer === 'js') {
        alert('Правильный ответ! Вы изучаете JavaScript.' );
    } else {
        alert(selectedAnswer);
    }
}
</script>

</body>
</html>
  • Вопрос задан
  • 67 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Seasle
@Seasle Куратор тега CSS
Вариант 1: при помощи :has.
.option:has(input:checked) {
    background-color: peachpuff;
}

Вариант 2: при помощи JS и CSS:
.option.active {
    background-color: peachpuff;
}

const optionsContainer = document.querySelector('.options');
const options = optionsContainer.querySelectorAll('.option');

optionsContainer.addEventListener('click', (event) => {
  const option = event.target.closest('.option');

  if (option !== null) {
    options.forEach((entry) => entry.classList.remove('active'));
    option.classList.add('active');
  }
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend developer (Vue.js)
Хабр • Москва
от 250 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написание нейросети на Python или C++ для анализа ЭКГ сигналов
16 февр. 2025, в 11:06
15000 руб./за проект
Поправить View Django для загрузки данных об игре
16 февр. 2025, в 11:05
1000 руб./за проект
Скопировать ТГ бота.
16 февр. 2025, в 09:26
15000 руб./за проект
Ещё заказы