HTML5 Ninja - Custom CheckBox

Posted at

This is a checkbox, CLICK IT:

- I miss the "square", where is it???

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

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