2

I'm using this admin panel 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;

enter image description here

The method seems simple however I just cannot seem to grasp;

<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
    <input type="checkbox" class="mail-group-checkbox">
    <span></span>
</label>

There is my admin panel I am working on to forward to my developer, mine is more of a concept and practice.

Additional Information

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 <span></span> this removes the visible checkbox.

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

  • Have you copied their CSS code rules? Have you copied their fonts, as that star shape will probably be a font character. What is the actual specifics of your question, what part of this is not working as intended on your site? – Martin May 11 '16 at 19:44
  • Possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) – Tim Troiano May 11 '16 at 19:45
  • The star shape is part of Font-Awesome and yes it would be good to just copy their code, stealing however I would not learn anything from their techniques used. I have looked through their code several dozen times with no good outcome, well, no working outcome so far. I'm not asking for a direct copy. –  May 11 '16 at 19:46
  • So can you clarify a bit more about what your actual problem actually is, edit your question, please. – Martin May 11 '16 at 20:00
  • @Martin I now realise how open this question is. Hopefully I have just cleared things up a little in my edit? –  May 11 '16 at 21:43

1 Answers1

1

The <input type="checkbox"> is invisible and only used to toggle the state between :active and :not(:active).

Its wrapped inside a <label>, because clicking anything inside the <label> will change the state of the <input type="checkbox"> element.

Finally, the <span> is what is used to style whatever you want the visible checkbox to look like. Then you use label input[type="checkbox"] + span and label input[type="checkbox"]:active + span to style the <span>.

the + addresses the "next sibling element". The next sibling for <input type="checkbox"> is the <span> element. That way you can toggle it "on and off".

That way, you "visible checkbox" can be anything you want, no Javascript needed. And the hidden real checkbox is the one that gets submitted with the form, no extra work.

I made a quick Plunker here with an simple example.

C14L
  • 12,153
  • 4
  • 39
  • 52
  • This is an absolutely fantastic answer, very educational. It is a shame my question is a bit topsy-turvy as I'm not sure how others will comea cross your answer. –  May 11 '16 at 22:12
  • I found it via google image search lol – Kelly Larsen Apr 15 '18 at 11:04