用于显示/隐藏内容的自定义单选按钮

Question

我正在尝试构建一个交互式电子邮件内容块，该块将根据选择显示或隐藏内容。在我尝试自定义标签之前，它起了作用。在我将输入和标签封装在div中后，它就停止了工作。我认为这可能会让我的选择器脱落，但我不确定如何解决这个问题。

.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;">&nbsp;</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;">&nbsp;</div>
</div>

Answer 1

我认为选择器可能是您的弱点，再次鼓励您查看w3school的CSS selectors Reference。

无论如何，我做了一个简化的版本，尽可能类似于你当前的结构，所以你可以看到它的工作。

.hidden_input {
display: none;
}
#red_input+label>span {
background-color: red;
}
#blue_input+label>span {
background-color: blue;
}
label>span>img {
opacity: 0;
transition: all 0.3s ease;
}
.hidden_input:checked+label>span>img {
opacity: 1;
}
#red_content,
#blue_content {
display: none;
}
#red_input:checked~#red_content,
#blue_input:checked~#blue_content {
display: block;
}

<div class="custom-radios">
<input type="radio" id="red_input" class="hidden_input" name="color" value="red">
<label for="red_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<input type="radio" id="blue_input" class="hidden_input" name="color" value="blue">
<label for="blue_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;">&nbsp;</div>
<p style="margin:0;" id="red_content">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue_content">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
</div>

您还可以在HTML代码中任意位置播放和放置元素，然后使用grid设置它们的位置(这只是另一个选项(。