Style checkboxes as Toggle Buttons

Question

On my website, users can post articles and tag them accordingly using some pre-set tags. These tags are in the form of checkboxes. Example below:

Answer 1

This can be done using checkboxes and labels, the adjacent sibling selector – and the CSS3 :selected pseudo class.

HTML:

[ Aliens ]
[ Ghosts ]
[ Monsters ]

CSS:

input { display:none; }
input:checked ~ label { color:red; }

http://jsfiddle.net/drTg2/

But be aware that this will easily fail in older browsers – because they don’t know ~ or :checked. And older IE have problems with checkboxes set to display:none – won’t transfer them when the form is submitted (although that can be overcome by other means of hiding, f.e. absolute positioning of the screen).

If you don’t insist on a pure HTML/CSS solution – there are many scripts / {js-framework-of-your-choice}-plugins out there, that help achieve the same effect.