Javascript.RU

Голосование: Можно ли, без js, сделать панель с radio (обёрнутую в div), изменяющих цвет блока?
Открытый опрос: другие пользователи будут видеть, кто как проголосовал.
Опции опроса
Можно ли, без js, сделать панель с radio (обёрнутую в div), изменяющих цвет блока?

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2019, 10:26
MOT MOT вне форума
Интересующийся
Отправить личное сообщение для MOT Посмотреть профиль Найти все сообщения от MOT
 
Регистрация: 30.08.2019
Сообщений: 19

Изменение цвета блока с помощью radio
Всем здравствуйте! У меня новый вопрос.
Сегодня я решил сделать div, который будет меняться при изменении выбранного radio. Вот сам код:
<!DOCTYPE html>
<html>
<head>
<title>Изменение цвета блока</title>
<meta charset="UTF-8">
<style>
.white:checked ~ .block {
background: white;
}
.black:checked ~ .block {
background: black;
}
.gray:checked ~ .block {
background: #3F4344;
}
.white2:checked ~ .block {
color: white;
}
.black2:checked ~ .block {
color: black;
}
.gray2:checked ~ .block {
color: #3F4344;
}
</style>
</head>
<body>
<hr>
<span>Фон:</span>
<input type="radio" name="change" class="white" checked>
<input type="radio" name="change" class="black">
<input type="radio" name="change" class="gray">
<hr>
<span>Текст:</span>
<input type="radio" name="change2" class="white2" checked>
<input type="radio" name="change2" class="black2">
<input type="radio" name="change2" class="gray2">
<hr>
<div class="block">Блок</div>
</body>
</html>

Вроде всё работает и возникает вопрос — в чём же вопрос? Я обнаружил две очень досадные вещи, работая с checkbox и radio:
1)Если наши radio (checkbox) обёрнуты в какой либо тег (кроме html и body), то при изменении radio (checkbox) стили не работают;
2)Если radio (checkbox) в коде стоят после элемента, который необходимо изменить, то стили также не срабатывают.
Я хотел бы узнать, как можно изменить цвет блока при выборе другого radio (input type radio должен быть обернут в div), если можно найти решение на CSS, буду рад, но и против js не имею ничего против.
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2019, 12:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,563

MOT, цсс селекторы не могут "выходить из" при определении элементов...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Изменение цвета блока в зависимости от начального цвета SVDDVS jQuery 3 10.02.2016 20:38
Изменение цвета ссылки с помощью js Alex Pacifik Элементы интерфейса 3 31.01.2012 14:08
Изменение картинки с помощью radio magahed Events/DOM/Window 2 24.11.2011 15:16
Изменение картинки с помощью radio magahed Элементы интерфейса 1 15.11.2011 19:59