将“复选框”链接到另一个容器中的元素的任何方式（仅限 HTML/CSS）

Posted 2023-03-05

【中文标题】将“复选框”链接到另一个容器中的元素的任何方式（仅限 HTML/CSS）

【英文标题】：Any way to link "checkbox" to an element in another container (only HTML/CSS)

【发布时间】：2020-09-28 05:42:48

【问题描述】：

我有这种结构，我必须在每月和每年之间切换定价计划。我已经编辑了问题，只为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">$19.99</h1>    <!-- Element to link to -->
    <h1 class="annually">$199.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>

我想根据checkbox 的状态显示/隐藏相应的h1 标签。 问题是我不必在这里使用任何类型的脚本。

我尝试使用body:has(input:checked) .card .monthly ... 等，但如 mdn 上所列，它没有浏览器的支持。

还有什么可能？

【问题讨论】：

你能添加你的css吗？

【参考方案1】：

如果您可以在 html 中省略 <label>，您可以将复选框链接到相应的 <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">$19.99</h1>
    <!-- Element to link to -->
    <h1 class="annually">$199.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>

【讨论】：

那么开关滑块呢？我如何为switch 提供一个容器来容纳自己？

如果你需要容器​​，你必须使用脚本来使用:has选择器。或者，您可以将开关容器仅用于滑块吗？

现在我正在考虑使用slider 作为slider::before 的容器，它将充当新的slider，让我可以使用input:checked + .slider:before ....。有效吗？

我不太确定您想要实现什么，但它似乎有效。 input:checked + .slider::before

感谢您的帮助！