CSS複選框樣式不起作用

我有我的複選框，我試圖用下面的CSS來設計它。CSS複選框樣式不起作用

input[type="checkbox"]{ 
 
    display: none; 
 
    border: none !important; 
 
    box-shadow: none !important; 
 
} 
 

 
input[type="checkbox"] + label span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: url(/static/app/images/check_no.svg); 
 
} 
 

 
input[type="checkbox"]:checked + label span { 
 
    background: url(/static/app/images/check_yes.svg); 
 
    content: ''; 
 
    color: #fff; 
 
    vertical-align: middle; 
 
    width: 30px; 
 
    height: 30px; 
 
}

<div class="check1"> 
 
    <input id="id_contract_name" name="contract_name" type="checkbox"> 
 
    <label for=" id_contract_name "> 
 
     <span class="chk_contract"></span> Name on Contract 
 
    </label> 
 
</div> 
 

 

 
<div class="check2"> 
 
    <input id="id_is_ceo" name="is_ceo" type="checkbox"> 
 
    <label for=" id_is_ceo "> 
 
    <span></span> CEO? 
 
    </label> 
 
</div>

的複選框是我的表單中。

當我點擊我的複選框時，這不起作用。我是新來的造型，讓我知道錯誤的地方。

來源

2016-07-27 Yogi

您在for屬性中的名稱周圍留有空格，請將其刪除。

工作演示：

input[type="checkbox"]{ 
 
display: none; 
 
border: none !important; 
 
box-shadow: none !important; 
 
    } 
 

 
     input[type="checkbox"] + label span { 
 
display: inline-block; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
background: url(/static/app/images/check_no.svg); 
 

 
     } 
 

 
    input[type="checkbox"]:checked + label span { 
 
background: url(/static/app/images/check_yes.svg); 
 
content: ''; 
 
color: #fff; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
     /*added this to show the behavior here on SO*/ 
 
     background-color: #000 
 
}

 <div class="check1"> 
 
      <input id="id_contract_name" name="contract_name" type="checkbox"> 
 
      <label for="id_contract_name"> 
 
       <span class="chk_contract"></span> Name on Contract 
 
      </label> 
 
     </div> 
 

 

 
    <div class="check2"> 
 
      <input id="id_is_ceo" name="is_ceo" type="checkbox"> 
 
      <label for="id_is_ceo"> 
 
       <span></span> CEO? 
 
      </label> 
 
     </div>

來源

2016-07-27 09:28:43 beerwin

就不得不提到的ID或類CSS。如果你想動態添加CSS，那麼你必須使用JavaScript或jQuery。

#id_contract_name{ 
 
display: none; 
 
border: none !important; 
 
box-shadow: none !important; 
 
    } 
 

 
     #id_is_ceo { 
 
display: inline-block; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
background: url(/static/app/images/check_no.svg); 
 

 
     } 
 

 
    input[type="checkbox"]:checked + label span { 
 
background: url(/static/app/images/check_yes.svg); 
 
content: ''; 
 
color: #fff; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
}

<html> 
 
<body> 
 
    <div class="check1"> 
 
      <input id="id_contract_name" name="contract_name" type="checkbox"> 
 
      <label for=" id_contract_name "> 
 
       <span class="chk_contract"></span> Name on Contract 
 
      </label> 
 
     </div> 
 

 

 
    <div class="check2"> 
 
      <input id="id_is_ceo" name="is_ceo" type="checkbox"> 
 
      <label for=" id_is_ceo "> 
 
       <span></span> CEO? 
 
      </label> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-07-27 09:29:43 Pirate

這不是OP想要什麼。 OP想要隱藏複選框並根據選中的屬性顯示自定義圖形而不是它。 – beerwin

CSS複選框樣式不起作用

回答

相關問題