В общем, пытался очень долго это сделать, лазил по многим сайтам, но почему то блоки просто не меняли цвет, если есть возможность то покажите работающий код по такой схеме:
1) Три блока с разными цветами.
2) При клике на чекбокс (при отметке чекбокса) что бы блоков менялся.
Буду очень признателен за код и объяснение, спасибо)
Главное соблюдать структуру правильно, если закинуть чекбокс глупоко то он вроде может и в css не отобразить изменения при отметке, вот пример:
<label for="check">
<input type="checkbox" id="check">
<div class="main-block">
<div class="color1">
<div class="color2">
<div class="color3">
Подпись к чекбоксу, потом сам чекбокс, далее наши три блока с разными цветами, сейчас покажу css:
.color1 {
width: 200px;
height: 200px;
background-color: blue;
}
.color2 {
width: 200px;
height: 200px;
background-color: red;
}
.color3 {
width: 200px;
height: 200px;
background-color: green;
}
#check:checked ~ .main-block> .color1{
background-color: red;
}
#check:checked ~ .main-block > .color2{
background-color: green;
}
#check:checked ~ .main-block > .color3 {
background-color: blue;
}
Указали размеры и базовый бекграунд, далее привязываемся к id чекбокса, когда мы отмечаем чекбокс то применяются стили для указанного справа класса, в данном случае мы прописали такое для наших трех блоков с разными цветами, если детально не прописать путь к классу, оно вроде вообще не поменяется. Вот как то так)