Styling radio button and checkbox controls

It seems that it is unclear how to style form controls. Specifically, it
is unclear how radio buttons and checkboxes should be styled.

I did a search on my own as I wanted to do it myself, but all the
results I could in my brief research find boils down to hiding the real
control and providing a fake one by styling a sibling element, usually a
label.

This is clearly troublesome since accessibility technologies can be
confused by these shenanigans. It smells too.

However, how should these controls be styled? While they are quite
varied in their style, they at least all have the same core design:
box/circle + marker.

This situation feels familiar to the one I brought up in February [1],
but is this a case of something that should be implemented using pseudo
child elements?

[1] http://lists.w3.org/Archives/Public/www-style/2013Feb/0501.html

Received on Friday, 22 March 2013 16:37:48 UTC