title: Changing the color of checkbox if checked
body: <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>