自定义单选按钮以显示/隐藏内容

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 设置它们的位置（这只是另一种选择）。