Fancy Checkbox, working with tab-key

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
  <h1>Fancy Checkbox, working with tab-key</h1>
  <p>This example demonstrates fancy textbox using icons (in this case FontAwsome).</p>
  <p>The main issue here is to allow the textbox to receive focus, feature missing from most of the fancy box solutions using CSS</p>
  <p>Note that you can use keyboard to navigate between the checkboxes using the Tab and Shift-Tab keys</p>

  <div>
    <input type="checkbox" class="fancy-check" id="check1" checked/>
    <label for="check1"><span>Checkbox 1</span>
    </label>
  </div>
  <div>
    <input type="checkbox" class="fancy-check" id="check2" />
    <label for="check2"><span>Checkbox 2</span>
    </label>
  </div>
  <div>
    <input type="checkbox" id="check3" />
    <label for="check3"><span>Checkbox 3, not fancy</span>
    </label>
  </div>
  <br/>The idea behind this solution is to use the label element to grab clicks and input focus to the checkbox. The downside to this solution is that you require speciffic html markup for it to work properly.<br/>
  The markup has to be of this form:
  <br/>
  <code>&lt;input type="checkbox" id="someId"&gt;&lt;label for="someId"&gt;&lt;span&gt;The label text&lt;/span&gt;&lt;/label&gt;</code>
  <br/>
  <br/>This method is dangerous for other checkboxes in the page if they do not follow this markup.
  <br/>Therefore I also added the usage of the class <b>"fancy-check"</b> to be used in the markup:
  <br/>
  <b><code>&lt;input type="checkbox" class="fancy-check" id="someId"&gt;&lt;label for="someId"&gt;&lt;span&gt;The label text&lt;/span&gt;&lt;/label&gt;</code></b>
  <br/>
  <br/>To put this solution to gether I combined ideas from two other solutions:
  <br/>
  <a href="http://codepen.io/CreativeJuiz/pen/zqKtp">Flat UI by Geoffrey Crofte</a>
  and
  <br/>
  <a href="http://stackoverflow.com/questions/11223615/how-to-use-font-awesome-for-checkboxes-etc/14226542#comment39941173_14226542">
Stack overflow answer by konsumer</a>
  <br/>.

</body>

</html>

// No JS required

/*Move he original checkbox out of the way */
[type="checkbox"].fancy-check {
  position: absolute;
  left: -9999px;
}
/*Align the icon and the label text to same height using tabl-cell display*/
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/
.fancy-check ~ label >  span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}
/*The label will contain the icon and the text, will grab the focus*/
[type="checkbox"].fancy-check + label {
  cursor: pointer;
  display: table;
}
/*The icon container, set it to fixed size and font size, the padding is to align the border*/
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/
[type="checkbox"].fancy-check + label:before {
  font-family: 'FontAwesome';
  display: inline-block;
  -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid transparent;
  font-size: 22px;
  min-width: 28px;
  padding: 2px 0 0 3px;
}
/* toggle font awsome icon*/
[type="checkbox"].fancy-check:checked + label:before {
  content: "\f046";
}
[type="checkbox"].fancy-check:not(:checked) + label:before {
  content: "\f096";    
}
/*Do something on focus, in this case show dashed border*/
[type="checkbox"].fancy-check:focus + label:before {
  border: 1px dashed #777;
}
/*Do something on hover, in this case change the image color*/
[type="checkbox"].fancy-check:hover + label:before {
   color: #67afe5;
}

# Fancy checkbox using CSS #
This example demonstrates fancy textbox using icons (in this case FontAwsome). 

The main issue here is to allow the textbox to receive focus, feature missing from most of the fancy box solutions using CSS.  
Note that you can use keyboard to navigate between the checkboxes using the `Tab ` and `Shift-Tab` keys.  

The idea behind this solution is to use the label element to grab clicks and input focus to the checkbox. 

The downside is that you require specific html markup for it to work properly.  

The markup has to be of this form: 

    <input type="checkbox" class="fancy-check" id="myId"/>
      <label for="myId" ><span>The label text</span></label>

The `fancy-check` class is used to insure that the style do not affect other checkboxes that are not supposed to be fancy, or are missing the required markup to function properly.