Custom Checkbox as weblock

Due to the way browsers cannot currently handle custom checkboxes (you have to have a checkbox and a label) is there a way to have this setup as a webblock or similar easy to use container that can be used across our application?

The problem with using a webblock is that you cannot get the value of a checkbox from an external webblock (or some other place other than the webblock containing the checkbox input itself). Also you cannot use a placeholder as a label needs to point to the input.

Your web block can receive the runtime Id of the checkbox, allowing it to modify it, via javascript. Or maybe you can use a CSS3-only approach, which would only require changing your theme.

Regardless on how you decide to implement this (CSS3, Javascript...), the key point is that you should continue to get the value of the checkbox from its associated variable.