I would like to change the fill color of an svg shape when a checkbox is clicked. I have this working, however if I wrap the checkbox input in a div tag it no longer works.

#circles {
  fill: #00ffff;
}

#circ-toggle .toggler:checked~#circles .circ1 {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>

<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If your design can tolerate this change, then your current css will work:

Notice that I have moved the closing tag for <div id="circ-toggle" > to the end of your css so that it encapsulates <div id="circles">. Doing this creates a sibling relationship between the checkbox and <div id="circles">. Now the general sibling combinator (~) can reach the desired element.

You could of course use javascript to easily accomplish this but it looks like you want a css-only answer.

const checkbox = document.getElementById('toggle-1')

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

#circles {
  fill: #00ffff;
}

.gray {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>
<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> EDIT: Here is a javascript method:

const checkbox = document.getElementById('toggle-1');
const circle = document.querySelector("#circles > svg > g > circle.circ1");

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    circle.classList.add("gray");
  } else {
    circle.classList.remove("gray");
  }
})

#circles {
  fill: #00ffff;
}

.gray {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>
<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>