HTML5 Ninja – Custom CheckBox

This is a checkbox, CLICK IT:

– I miss the “square”, where is it???

Too bad :[..
..Have a look:

<style>
 input[type="checkbox"]{ display:none; }
 input[type="checkbox"]          + label[for]:before{ content:'🍎 Red Apple';   color:red;  }
 input[type="checkbox"]:checked  + label[for]:before{ content:'🍏 Green Apple'; color:green;}
</style>
</head>
<input type="checkbox" id="check1"/><label for="check1"></label>
Code Notes:
-----------------

1. hide the "real" checkbox.
2. connect a label using the checkbox-id attribute.

-- now: when you'll click the label,
   you'll also change the state of the checkbox! --

3. place the label immediately after the checkbox,
   (we'll be using the CSS3 + relation).

-- now: you can style the label according to 
   the state of the checkbox using the :checked pseudo-state.

4. use :before and content: '....'
   visit umoji website
   and copy&paste some Unicode goodness...
   ...☐ ☑ ☒ ✔ ✘ ⚐ ⚑ ✅ ✖ ✦ ✧.

5. be creative, have fun!!