CSS only goodness: Part IV
Do you cringe everytime your designer designs a really sweet looking checkbox that is impossible to style? There are numerous javascript plugins that replace your checkbox inputs with all sorts of rubbish HTML and CSS to get them looking exactly how you want. Now here's a trick that will prevent the need for javascript of even any extra HTML!
Just put your input followed immediately by the associated label.
<input type="checkbox" />
<label for="cb1">Custom checkbox</label>
<style>
input[type="checkbox"] { position: absolute; visibility: hidden; }
input[type="checkbox"] + label:before { content:''; display:inline-block; width:1.7em; height:1.7em; border:1px solid #000; background:#fff; }
input[type="checkbox"]:checked + label:before { content:'X'; }
</style>
No JavaScript, no complex HTML, it's as simple as that! Better still it uses the browser's native events, so if you do added events via JavaScript it will not affect the checkbox's visual behaviour.
