HTML5 Ninja - Custom CheckBox

Posted at

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!!