My goal is to create an interactive email content block that can display or hide content based on user selection. It was functioning properly until I decided to customize the label. After wrapping the input and label in a div, the functionality ceased. I suspect that this change may have caused some issues with my selectors, but I am uncertain about how to address the problem.
.custom-radios input[type="radio"] + label span img {
opacity: 0;
transition: all 0.3s ease;
}
.custom-radios input[type="radio"]#red + label span {
background-color: red;
}
.custom-radios input[type="radio"]#blue + label span {
background-color: blue;
}
.custom-radios input[type="radio"]#green + label span {
background-color: green;
}
.custom-radios input[type="radio"]#orange + label span {
background-color: orange;
}
.custom-radios input[type="radio"]:checked + label span img {
opacity: 1;
}
#red{
display: none
}
#blue{
display: none
}
#green{
display: none
}
#orange{
display: none
}
input[type="red"]:checked ~ #red {
display: block
}
input[value="blue"]:checked ~ #blue {
display: block;
}
input[value="green"]:checked ~ #green {
display: block;
}
input[value="orange"]:checked ~ #orange {
display: block;
}<div class="custom-radios">
<div>
<input type="radio" id="red" name="color" value="red">
<label for="red">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="green" name="color" value="green">
<label for="green">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="orange" name="color" value="orange">
<label for="orange">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<p style="margin:0;" id="red">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="green">
<img src="https://via.placeholder.com/580x200/00FF00/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="orange">
<img src="https://via.placeholder.com/580x200/FFA500/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
</div>