0

I am trying to make a changing of my by clicking on chechbox (radio), but it dont works! I am doing by example https://www.sitepoint.com/building-style-switcher-with-pure-css-using-checked/ But doing something wrong. Code from example works, my code dont :(

Please, help me to find mistake

 body {
    background: #efefef; 
 }

 .programs-categories {
  padding-top: 30px; padding-left: 5%; padding-right: 5%; text-align: center; display: flex; align-items: center; text-align: center; padding-top: 30px;
}

.programs-categories-name {
  cursor: pointer; background: #FFF; border-radius: 17px; padding: 8px; width: 15%; margin-right: 2%;
}

.program-checkbox {
  display: none;
}

input[type="radio"][name="category_name"]:checked + label {
  color:#FFF;
  background: #008f92;
}

.programs-menu {
  margin-left: 5%; margin-right: 5%; width: 90%; text-align: center; overflow-x: scroll; margin-top: 30px; display: flex; background: #FFF;
}

.category_1:checked ~ .programs-menu {
  background: #48b76a; color: #FFF;
}
#category_2:checked ~ .programs-menu {
  background: #581845; color: #FFF;
}
category_3:checked ~ .programs-menu {
  background: #FFC300; color: #FFF;
}
input[type="radio"][name="category_name"][id="category_1"]:checked ~ .programs-menu {
  background: #48b76a; color: #FFF;
}
input[type="radio"][name="category_name"][id="category_2"]:checked ~ .programs-menu {
  background: #581845; color: #FFF;
}
input[type="radio"][name="category_name"][id="category_3"]:checked ~ .programs-menu {
  background: #FFC300; color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="programs-categories">
        <input type="radio" name="category_name" id="category_1" class="program-checkbox" checked>
        <label class="programs-categories-name" for="category_1">Category 1</label>
        <input type="radio" name="category_name" id="category_2" class="program-checkbox">
        <label class="programs-categories-name" for="category_2">Category 2</label>
        <input type="radio" name="category_name" id="category_3" class="program-checkbox">
        <label class="programs-categories-name" for="category_3">Category 3</label>
    </div>
    <div class="programs-menu">
        text goes here
    </div>
</body>
</html>
user14436239
  • 1

0 Answers0