Changing the color of checkbox if checked
<p>I am trying to change the background color and border of a checkbox but it is not working.</p>
<p>HTML:</p>
<pre><code>&lt;label for=&quot;checkbox1&quot; class=&quot;checkbox&quot;&gt;
  &lt;input id=&quot;checkbox1&quot; type=&quot;checkbox&quot; role=&quot;checkbox&quot; /&gt;&lt;span class=&quot;custom&quot;&gt;Checkbox&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p>CSS:</p>
<pre><code>.checkbox input:checked {
    border-color: red;
    background-color:red;
}
</code></pre>
<p><strong><a href="https://jsfiddle.net/xv7vjspf/" rel="noreferrer">JSFiddle Demo</a></strong></p>
<p><strong>UPDATE:</strong></p>
<p>I can't change the markup</p>