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

时间:2014-12-03 16:02:42

标签: html css

如果我选中一个复选框,则下拉列表应仅显示在该列表的旁边,而是显示在其下的所有其他列表中。

这是我用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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:7)

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

&#13;
&#13;
.sub-nav { display: none; }

input[type=checkbox]:checked + label + .sub-nav { display: inline; }
&#13;
<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>
&#13;
&#13;
&#13;