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复选框显示错误输入[类型=复选框]：复选框

回答

相关问题