CSS checkbox styling not working
<p>I have my checkboxes and I am trying to style it with the following CSS.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="check1"&gt;
  &lt;input id="id_contract_name" name="contract_name" type="checkbox"&gt; 
    &lt;label for=" id_contract_name "&gt; 
      &lt;span class="chk_contract"&gt;&lt;/span&gt;   Name on Contract
    &lt;/label&gt;
&lt;/div&gt;


&lt;div class="check2"&gt;
  &lt;input id="id_is_ceo" name="is_ceo" type="checkbox"&gt; 
  &lt;label for=" id_is_ceo "&gt; 
    &lt;span&gt;&lt;/span&gt;  CEO?
  &lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The checkboxes are inside my form. </p>

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