Checkbox tab index not working when set to hidden with custom design

Question

I'm using a checkbox and adding a custom design to it using CSS

label {
  position: relative;
  margin-bottom: 0.5em; }

.input-field {
  width: 100%;
  border: 1px solid #ecf0f1;
  padding: 0.5em;
 }

input[type="radio"],
input[type="checkbox"] {
  display: none; 
}

input[type="checkbox"] + label {
  padding-left: 1.5em; 
}

input[type="checkbox"] + label:before {
  position: absolute;
  left: 0;
  top: 4px;
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid rgba(0, 0, 0, 0.25); 
}

input[type="checkbox"]:focus,
input[type="checkbox"]:checked + label:before {
  content: "\2713"; /* "✓" */ 
}

But the problem is that when navigating the form with the keyboard with the tab key the check box is ignored. How can I include it in the flow of navigation?

Demo

Answer 1

I changed it from display: none; to opacity: 0; and it works fine here is the new edited code

http://jsbin.com/yuxizazo/1