title: CSS Checkbox styling - size color change
body: <p>I am trying to do simple checkbox styling.
  The color change is not working.</p>
  <p>How to change the color and border?</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]{
        height: 25px;
        width: 25px;
        background-color: #eee;
        }
      
      input[type=checkbox]:checked {
          background-color: #3ee738;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;p&gt;
      &lt;input type="checkbox" id="showall" name="showall" value=0&gt;&amp;nbsp;
      &lt;label for="showall"&gt;Show All&lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
      &lt;input type="checkbox" id="showfl" name="showfl" value=0&gt;&amp;nbsp;
      &lt;label for="showfl"&gt;Filtered&lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
      
      </code></pre>
  </div>
  </div>
  </p>