2016-07-27 207 views
2

我有我的複選框,我試圖用下面的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>

的複選框是我的表單中。

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

回答

1

您在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>

0

就不得不提到的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>

+1

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