3yRuL3z 3yRuL3z - 4 months ago 16
HTML Question

CSS checkbox styling not working

I have my checkboxes and I am trying to style it with the following 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>





The checkboxes are inside my form.

This does not work when I click my checkbox. I am new to styling and let me know where the error is.

Answer

You have spaces around the name in the for attribute, remove them.

Working demo:

 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>