CSS複選框顯示錯誤輸入[類型=複選框]：複選框

如果我選中一個複選框，下拉列表應該只顯示在那個旁邊，但它會顯示在其下的所有其他頁面中。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>

來源

2014-12-03 Chips

你應該使用直接相鄰的兄弟選擇器（+）不是一般的兄弟選擇（~）

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

來源

2014-12-03 16:03:23 fcalderan

CSS複選框顯示錯誤輸入[類型=複選框]：複選框

回答

相關問題