任何方式 link "checkbox" 到另一个容器中的元素（仅 HTML/CSS）

Question

我有这种结构，我必须在月度和年度之间切换定价计划。我已经编辑了问题以仅向 css 提供必要的代码-

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  text-align: center;
  background: #f6f6fe;
}

.cards-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 50px auto;
}

.card {
    flex: 0 0 250px;
    padding: 30px 3vw;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px #b3b5c633;
}

/* SWITCH */
.switch {
 margin: auto 10px;
 display: inline-block;
 width: 45px;
 height: 22px;
 border: none;
 background: linear-gradient(#a3a8f0, #696fdd);
 position: relative;
 vertical-align: middle;
}

.switch .slider {
 margin: 3px;
 display: inline-block;
 height: 16px;
 width: 16px;
 position: absolute; top: 0; bottom: 0; left: 0;
 background: #f5f7ff;
 -webkit-transition: all 0.2s cubic-bezier(0, 0.9, 0.99, 1);
 transition: all 0.2s cubic-bezier(0, 0.9, 0.99, 1);
}
.switch, .switch .slider {
 border-radius: 20px;
}

/* Switch pricing plan */
.switch>input:checked+.slider {
 transform: translateX(23px);
}

<small>Annually</small>
<label class="switch">
  <input type="checkbox" style="display: none;"></input>     <!-- Checkbox to link -->
  <span class="slider"></span>
 </label>
<small>Monthly</small>

<div class="cards-container">

  <div class="card side-card">
    <h3>Basic</h3>
    <h1 class="monthly" style="display: none">.99</h1>    <!-- Element to link to -->
    <h1 class="annually">9.99</h1>    <!-- Element to link to -->
    <hr>
    <h4>500 GB Storage</h4>
    <hr>
    <h4>2 Users Allowed</h4>
    <hr>
    <h4>Send up to 3 GB</h4>
    <hr>
    <a>Learn More</a>
  </div>
</div>

我想show/hide 相应的h1 标签基于checkbox 的状态。 问题是我不必在这里使用任何类型的脚本。

我尝试使用 body:has(input:checked) .card .monthly {...} 等，但如 mdn 中所列，浏览器不支持它。

还有什么可能？

Answer 1

如果可以省略HTML中的<label>，则可以link勾选相应的<h1>标签。

h1.monthly {
  display: none;
}

input[type=checkbox]:checked ~ div.cards-container h1.monthly {
  display: block;
}

<!--<label class="switch">-->
  <input type="checkbox" style="display: block;">     <!-- Checkbox to link -->
  <span class="slider"></span>
<!--</label>-->
<small>Monthly</small>

<div class="cards-container">

  <div class="card side-card">
    <h3>Basic</h3>
    <h1 class="monthly">.99</h1>
    <!-- Element to link to -->
    <h1 class="annually">9.99</h1>
    <!-- Element to link to -->
    <hr>
    <h4>500 GB Storage</h4>
    <hr>
    <h4>2 Users Allowed</h4>
    <hr>
    <h4>Send up to 3 GB</h4>
    <hr>
    <a>Learn More</a>
  </div>
</div>

任何方式 link "checkbox" 到另一个容器中的元素（仅 HTML/CSS）

Any way to link "checkbox" to an element in another container (only HTML/CSS)

html

css

html-input