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复选框样式不起作用

回答

相关问题