HTML/CSS Replicating Websites Checkbox
<p>I'm using this <a href="http://www.keenthemes.com/preview/metronic/theme/admin_1/app_inbox.html" rel="nofollow noreferrer">admin panel</a> for inspiration and someone learning along the way. I've been attempting for at least a good hour to try and replicate the checkbox used as seen below;</p>

<p><a href="https://i.stack.imgur.com/YBiK4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YBiK4.png" alt="enter image description here"></a></p>

<p>The method seems simple however I just cannot seem to grasp;</p>

<pre><code>&lt;label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"&gt;
    &lt;input type="checkbox" class="mail-group-checkbox"&gt;
    &lt;span&gt;&lt;/span&gt;
&lt;/label&gt;
</code></pre>

<p>There is my <a href="http://rafflebananza.com/Admin/Desktop/index2.html" rel="nofollow noreferrer">admin panel</a> I am working on to forward to my developer, mine is more of a concept and practice.</p>

<h2>Additional Information</h2>

<p>I would like to know more information on the checkboxes used as they do not appear to be custom checkboxes with images however if you remove the <code>&lt;span&gt;&lt;/span&gt;</code> this removes the visible checkbox.</p>

<p>Are there advantages to using this method as I know you can scale a checkbox however this scales everything including the tick and whatnot.</p>