仅使用CSS切换收音机输入 [英] Toggle radio input using CSS only
问题描述
以下代码使用脚本在第二次点击广播时切换/取消选中该广播。
我的问题是如何使用 > CSS only ？
.container {display：flex; flex-wrap：wrap; max-width：660px;}。container>标签{flex：1; flex-basis：33.333％;}。container> div {flex：1; flex-basis：100％;}。容器标签img {display：block; margin：0 auto;}。容器输入，.container输入〜div {display：none; padding：10px;}。container＃img1：checked〜＃img1txt，.container＃img2：checked〜＃img2txt，.container＃img3：checked〜＃img3txt，.container＃img4：checked〜＃img4txt {display：block;}
< div id =img-selectclass = container> < input id =img1type =radioname =img-descr> < input id =img2type =radioname =img-descr> < input id =img3type =radioname =img-descr> < label for =img1> < img src =http://lorempixel.com/200/200/food/1/alt => < / label> < label for =img2> < img src =http://lorempixel.com/200/200/food/6/alt => < / label> < label for =img3> < img src =http://lorempixel.com/200/200/food/8/alt => < / label> < div id =img1txt> < div> Recipe nr 1< / div> < / div> < div id =img2txt> < div>食谱nr 2< / div> < / div> < div id =img3txt> < div>食谱nr 3< / div> < / div>< / div>
编辑
我需要一个跨主要浏览器的跨浏览器解决方案，以及无脚本 >
要澄清，我希望正常无线电输入工作，但如果点击两次或重复，一个复选框输入。
也允许标记更改，只要布局结构保持不变，我也喜欢如果它可以断行，作为一个
主要焦点问题是如何使无线电输入可触发，虽然由于几个答案显示用纯CSS切换状态的其他方式，任何这样的技巧是受欢迎的。
您不能使用CSS更改单选按钮的功能。 CSS只是为视觉更改而设计的。
也就是说，你可以用一个聪明的黑客模拟这种行为。对于您的示例，我建议使用CSS在视觉上替换当前选择的单选按钮的标签，将虚标签附加到表示空白或空选择的另一个单选按钮。这样，点击虚拟标签就会选择空白选项，有效地清除您之前的选择：
.container {display：flex; flex-wrap：wrap; max-width：660px;}。container> label {flex：1; flex-basis：33.333％;}。container> div {flex：1; flex-basis：100％;}。容器标签img {display：block; margin：0 auto;}。容器输入，.container输入〜div {display：none; padding：10px;}。container＃img1：checked〜＃img1txt，.container＃img2：checked〜＃img2txt，.container＃img3：checked〜＃img3txt {display：block;}。container label [for = noimg] {display ：none;}。container＃img1：checked〜label [for = img1] ,. container＃img2：checked〜label [for = img2] ,. container＃img3：checked〜label [for = img3] {display：none; } .container＃img1：checked〜label [for = img1] + label [for = noimg] ,. container＃img2：checked〜label [for = img2] + label [for = noimg]标签[for = img3] + label [for = noimg] {display：block;}
< div id =img-selectclass =container> < input id =noimgtype =radioname =img-descr> < input id =img1type =radioname =img-descr> < input id =img2type =radioname =img-descr> < input id =img3type =radioname =img-descr> < label for =img1> < img src =http://lorempixel.com/200/200/food/1/alt => < / label> < label for =noimg> < img src =http://lorempixel.com/200/200/food/1/alt => < / label> < label for =img2> < img src =http://lorempixel.com/200/200/food/6/alt => < / label> < label for =noimg> < img src =http://lorempixel.com/200/200/food/6/alt => < / label> < label for =img3> < img src =http://lorempixel.com/200/200/food/8/alt => < / label> < label for =noimg> < img src =http://lorempixel.com/200/200/food/8/alt => < / label> < div id =img1txt> < div> Recipe nr 1< / div> < / div> < div id =img2txt> < div>食谱nr 2< / div> < / div> < div id =img3txt> < div>食谱nr 3< / div> < / div>< / div>
href =https://jsfiddle.net/Ajedi32/Lg17tueq/>在JSFiddle中查看）
The following code use a script to toggle/uncheck a radio when clicked a second time on the same.
My question is how do I do this using CSS only?
(function(lastimg) {
document.querySelector("#img-select").addEventListener('click', function(e){
if (e.target.tagName.toLowerCase() == 'input') {
if (lastimg == e.target) {
e.target.checked = false;
lastimg = null;
} else {
lastimg = e.target;
}
}
});
}());
.container {
display: flex;
flex-wrap: wrap;
max-width: 660px;
}
.container > label {
flex: 1;
flex-basis: 33.333%;
}
.container > div {
flex: 1;
flex-basis: 100%;
}
.container label img {
display: block;
margin: 0 auto;
}
.container input, .container input ~ div {
display: none;
padding: 10px;
}
.container #img1:checked ~ #img1txt,
.container #img2:checked ~ #img2txt,
.container #img3:checked ~ #img3txt,
.container #img4:checked ~ #img4txt {
display: block;
}
<div id="img-select" class="container">
<input id="img1" type="radio" name="img-descr">
<input id="img2" type="radio" name="img-descr">
<input id="img3" type="radio" name="img-descr">
<label for="img1">
<img src="http://lorempixel.com/200/200/food/1/" alt="">
</label>
<label for="img2">
<img src="http://lorempixel.com/200/200/food/6/" alt="">
</label>
<label for="img3">
<img src="http://lorempixel.com/200/200/food/8/" alt="">
</label>
<div id="img1txt">
<div>Recipe nr 1</div>
</div>
<div id="img2txt">
<div>Recipe nr 2</div>
</div>
<div id="img3txt">
<div>Recipe nr 3</div>
</div>
</div>
Edit
I need a cross browser solution, working on the major browsers, and without script, just CSS.
To clarify, I want it to work as a normal radio input, but if clicked twice, or repeatedly, on the same, it should toggle itself as a checkbox input does.
Also markup change are allowed, as long as the layout structure is kept the same, and I would also prefer if it can break line, as a page can have more than 3 recipes.
Edit 2
The main focus of the question is how to make a radio input togglable, though since a couple of answers show other ways to toggle a state with pure CSS, any such tricks is welcome.
You can't change the functionality of radio buttons using CSS. CSS is designed for visual changes only.
That said, you can simulate this behavior with a clever hack. For your example, I'd recommend using CSS to visually replace the label for the currently selected radio button with a dummy label attached to another radio button representing a "blank" or "empty" selection. That way, clicking the dummy label would select the "blank" option, effectively clearing your prior choice:
.container {
display: flex;
flex-wrap: wrap;
max-width: 660px;
}
.container > label {
flex: 1;
flex-basis: 33.333%;
}
.container > div {
flex: 1;
flex-basis: 100%;
}
.container label img {
display: block;
margin: 0 auto;
}
.container input, .container input ~ div {
display: none;
padding: 10px;
}
.container #img1:checked ~ #img1txt,
.container #img2:checked ~ #img2txt,
.container #img3:checked ~ #img3txt {
display: block;
}
.container label[for=noimg] {
display: none;
}
.container #img1:checked ~ label[for=img1],
.container #img2:checked ~ label[for=img2],
.container #img3:checked ~ label[for=img3] {
display: none;
}
.container #img1:checked ~ label[for=img1] + label[for=noimg],
.container #img2:checked ~ label[for=img2] + label[for=noimg],
.container #img3:checked ~ label[for=img3] + label[for=noimg] {
display: block;
}
<div id="img-select" class="container">
<input id="noimg" type="radio" name="img-descr">
<input id="img1" type="radio" name="img-descr">
<input id="img2" type="radio" name="img-descr">
<input id="img3" type="radio" name="img-descr">
<label for="img1">
<img src="http://lorempixel.com/200/200/food/1/" alt="">
</label>
<label for="noimg">
<img src="http://lorempixel.com/200/200/food/1/" alt="">
</label>
<label for="img2">
<img src="http://lorempixel.com/200/200/food/6/" alt="">
</label>
<label for="noimg">
<img src="http://lorempixel.com/200/200/food/6/" alt="">
</label>
<label for="img3">
<img src="http://lorempixel.com/200/200/food/8/" alt="">
</label>
<label for="noimg">
<img src="http://lorempixel.com/200/200/food/8/" alt="">
</label>
<div id="img1txt">
<div>Recipe nr 1</div>
</div>
<div id="img2txt">
<div>Recipe nr 2</div>
</div>
<div id="img3txt">
<div>Recipe nr 3</div>
</div>
</div>
这篇关于仅使用CSS切换收音机输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
