使用CSS切换搅局类内容和引导按钮组(无JavaScript)
使用CSS切换搅局类内容和引导按钮组(无JavaScript)
提问于 2020-08-20 11:51:09
而不是水平单选按钮，我希望有一个引导可切换按钮组，以显示/隐藏相关内容，而不是使用JavaScript。
本质上，它将成为一个由3-4个问题组成的表单，最终将显示正确的答案/按钮(将有4个答案可供选择)。
我如何在CSS中实现这一点？
#immigrant:checked~.conditional,
#required-2:checked~.conditional #option-2:checked~.conditional {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.control:not(:checked)~.conditional,
#immigrant:not(:checked)~.conditional,
#required-2:not(:checked)~.conditional,
#option-2:not(:checked)~.conditional {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form action="">
<label class="btn btn-primary" for="citizen">
<input type="radio" name="residency" value="Citizen" id="citizen"> Citizen</label>
<p class="conditional">Test Paragraph for Citizens - *Needs to be hidden*</p>
<input type="radio" name="residency" value="Immigrant" id="immigrant">
<label class="btn btn-primary" for="immigrant">Immigrants</label>
<p class="conditional">Test Paragraph for Immigrants</p>
</form>
回答 1
Stack Overflow用户
发布于 2020-08-20 12:56:02
标记的工作方式与您为其他复选框提供标记的方式不同。为了应用样式，您必须实际将该<p>放在<label>中，以便它是checkbox的兄弟项。
这是我能找到的最接近的了。这是有点老生常谈，但它是有效的。我想知道为什么您要在元素上使用所有这些属性来隐藏和显示它们。你想要的只是display: none和display: block来切换它们。
.control:checked~.conditional,
#immigrant:checked~.conditional,
#required-2:checked~.conditional,
#option-2:checked~.conditional {
display: block;
}
#citizen:checked~.conditional {
position: absolute;
left: 0px;
top: 46px;
color: #000000;
}
.control:not(:checked)~.conditional,
#immigrant:not(:checked)~.conditional,
#required-2:not(:checked)~.conditional,
#option-2:not(:checked)~.conditional,
#citizen:not(:checked)~.conditional {
display: none;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<form action="">
<label class="btn btn-primary" for="citizen">
<input type="radio" name="residency" value="Citizen" id="citizen"> Citizen
<p class="conditional">Test Paragraph for Citizens - *Needs to be hidden*</p>
</label>
<input type="radio" name="residency" value="Immigrant" id="immigrant">
<label class="btn btn-primary" for="immigrant">Immigrants</label>
<p class="conditional">Test Paragraph for Immigrants</p>
</form>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63498027
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号