zurb/foundation — pull request #2335 by blai (2013-05-09 02:27:35+00:00)
Title: Custom checkbox/radio button enhancement for better rtl support and web accessibility compliance

I did [this pull](https://github.com/zurb/foundation/pull/2286) request earlier to make custom checkbox and radio button more customizable. As it turned out, the alignment of the check mark was not done correctly (so specific margin was added when the pull request was accepted) so rtl would not work.

I spent sometime fixing this issue so there shouldn't be a need to do specific layout fix like before (tested with rtl and it worked).

While I did this, I found that the original implementation of custom checkbox/radio/dropdown does not have web accessibility support (so some common behavior such as using 'tab' key to switch around form inputs is not possible). It was because the custom input makes the input itself hidden and browser would skip processing it. This new implementation fixes that issue by setting `opacity: 0` on the input, but then absolutely position it to overlay the custom-drawn checkbox/radio. This gives us 2 benefits:
1. you can now use 'tab' to switch around form inputs just like when you are not using custom form input (so technically speaking, it is now web accessibility compliance ready: http://www.w3.org/WAI/intro/accessibility.php)
2. it no longer require any assistance of javascript to work! (I removed the corresponding javascript codes from `foundation.forms.js` (and it seems to work better on mobile device as well)

The only issue with this approach is that older version of IE (8 or earlier) does not support opacity. I think you can do `filter:alpha(opacity=40);` to support IE 7 & 8, but I do not have the proper environment to test this.