gpt4 book ai didi

html - CSS复选框显示错误输入[type=checkbox] :checkbox

转载 作者:太空宇宙 更新时间:2023-11-04 14:15:44 28 4
gpt4 key购买 nike

如果我选中一个复选框,下拉列表应该只显示在该复选框旁边,但它会显示在它下面的所有其他复选框中。

这是我在 html 代码中使用的 css

.sub-nav { display: none; }

input[type=checkbox]:checked + label ~ .sub-nav { display: inline; }
<html>
<body>
<input type="checkbox" name="lingue" value="ing" id="ing"><label for="ing">Inglese</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
<br>
<input type="checkbox" name="lingue" value="ted" id="ted"><label for="ted">Tedesco</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
<br>
<input type="checkbox" name="lingue" value="fra" id="fra"><label for="fra">Francese</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
<br>
<input type="checkbox" name="lingue" value="spa" id="spa"><label for="spa">Spagnolo</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
</body>
</html>

最佳答案

你应该使用直接相邻的兄弟选择器(+)而不是一般的兄弟选择器(~)

.sub-nav { display: none; }

input[type=checkbox]:checked + label + .sub-nav { display: inline; }
<html>
<body>
<input type="checkbox" name="lingue" value="ing" id="ing"><label for="ing">Inglese</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
<br>
<input type="checkbox" name="lingue" value="ted" id="ted"><label for="ted">Tedesco</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
<br>
<input type="checkbox" name="lingue" value="fra" id="fra"><label for="fra">Francese</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
<br>
<input type="checkbox" name="lingue" value="spa" id="spa"><label for="spa">Spagnolo</label>&emsp;
<select class="sub-nav">
<option value="ott">Ottimo</option>
<option value="buo">Buono</option>
<option value="suff">Sufficente</option>
<option value="scol">Scolastico</option>
<option value="pess">Pessimo</option>
</select>
</body>
</html>

关于html - CSS复选框显示错误输入[type=checkbox] :checkbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27276234/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com