Custom HTML Checkbox symbols with keyboard navigation support?

Question

I can replace the traditional HTML checkbox symbols "unchecked", "checked", and "indeterminate" with custom symbols:

<link rel="stylesheet" 
  href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<style type="text/css">
  input[type="checkbox"] {
    display: none;
  }
  input[type="checkbox"]+label:before {
    font-family: FontAwesome;
    content: "\f096"; /* fa-square-o */
  }
  input[type="checkbox"]:checked + label:before {
    content: "\f046"; /* fa-check-square-o */
  }
  input[type="checkbox"]:indeterminate + label:before {
    content: "\f0c8"; /* fa-square */
    color: grey;
  }
</style>
...
<input type="checkbox" id="cb1" />
<label for="cb1"> label text</label>

See http://plnkr.co/SPvN1xEkQqcFcYbxWur2

This works great with the exception of keyboard navigation and control. With traditional checkboxes you can [TAB] through the input elements and links, and access them with [SPACE] and [ENTER]. The custom symbols use display:none which seems to disable keyboard control for these elements.

How do I re-enable keyboard control for these custom checkboxes?

Answer 1

Instead of setting the check boxes to display: none why not just hide them behind. you will still be able to tab to focus and keep other keyboard events.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<style type="text/css">
  input[type="checkbox"] {
    position:absolute;
    margin: 2px 0 0;
    z-index:0;
  }

  input[type="checkbox"]+label:before {
    position: relative;
    z-index: 5;
    background: white;
    font-family: FontAwesome;
    content: "\f096";
  }

  input[type="checkbox"]:checked + label:before {
    position: relative;
    z-index: 5;
    background: white;
    content: "\f046";
  }

  input[type="checkbox"]:indeterminate + label:before {
    position: relative;
    z-index: 5;
    background: white;
    content: "\f0c8";
    color: grey;
  }
</style>
...
<input type="checkbox" id="cb1" />
<label for="cb1"> label text</label>

Live example: http://plnkr.co/edit/6lzcJIdMWFRzVNQBxRPu?p=preview