Как поменять цвет текста при выборе radio кнопки?

Ссылка скопирована
CSS HTML PHP
17 января 2026 1 ответ

есть 4 radio кнопки с текстом, необходимо при активной radio кнопке менять цвет

стили в scss - такое чувство, что просто что-то не дописываю или пишу не туда

пример
snippet

Дополнительно:

стили в scss - такое чувство, что просто что-то не дописываю или пишу не туда

Во-первых, в песочнице вы пишете на scss, а говорите, что это css => ничего не работает вообще.
Нужно указать, что вы используете препроцессор.

Как поменять цвет текста при выборе radio кнопки?

Во-вторых, в коде нет ничего, что говорило бы сменить цвет текста.

Вам нужно либо label поставить после инпута либо обернуть текст в span и использовать соседние селекторы.
input:checked + label {}
input:checked + span {}

для input нельзя создать before. сделай после input какой то span и с ним работай как сейчас пытаешься с before.
обращайся к нему через :checked ~ span {}

  • для input нельзя создать before

    Можно, если задать ему appearance: none;

  • Ankhena, а есть пример? у меня не вывелся.
  • drtvader, пример есть у автора в вопросе, если в настройках песочницы поменять css на scss
  • Ankhena, Спасибо все получилось

Ответы:

Я бы чуть изменил структуру. Так будет в разы проще манипулировать стилями.
https://codepen.io/romant094/pen/BaGMqYQ

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Ирина WP Ответ

Для изменения цвета текста при выборе radio кнопки можно использовать CSS и JavaScript.

Пример кода на HTML:

 
 
 
 
    /* Стили для текста */
    .red-text {
        color: red;
    }
    .blue-text {
        color: blue;
    }
 
 
 
    <label> Red</label>
    <label> Blue</label>
    <p id="text">Текст для изменения цвета</p>
 
 
    function changeColor(radio) {
        var text = document.getElementById('text');
 
        // Устанавливаем класс текста в зависимости от выбранного значения radio кнопки
        if (radio.value === 'red') {
            text.className = 'red-text';
        } else if (radio.value === 'blue') {
            text.className = 'blue-text';
        }
    }

/* Стили для текста */ .red-text { color: red; } .blue-text { color: blue; } <label> Red</label> <label> Blue</label> <p id="text">Текст для изменения цвета</p> function changeColor(radio) { var text = document.getElementById('text'); // Устанавливаем класс текста в зависимости от выбранного значения radio кнопки if (radio.value === 'red') { text.className = 'red-text'; } else if (radio.value === 'blue') { text.className = 'blue-text'; } }

В данном примере при выборе radio кнопки "Red" текст будет окрашен в красный цвет, а при выборе "Blue" - в синий цвет. В функции `changeColor` мы получаем элемент с id "text" и в зависимости от выбранного значения radio кнопки устанавливаем соответствующий класс текста.

Таким образом, вы можете легко изменить цвет текста при выборе radio кнопки с помощью CSS и JavaScript.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ JavaScript Как мне в данном запросе обработать ошибку с определенным статусом? 1 ответ