CODEWITHSUNDEEP
htmlcss
Cip
Cip

Reputation: 117

CSS checkbox display error input[type=checkbox]:checkbox

If I check a checkbox the drop down list should be shown only next to that one, but instead it appears for all the others under it.

Here is the css i use with the html code

.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>

Upvotes: 2

Views: 271

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You should use the immediate-adjacent sibling selector (+) not the general sibling selector (~) 

.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>

Upvotes: 7

Related Questions