title: Checkbox tab index not working when set to hidden with custom design
body: <p>I'm using a checkbox and adding a custom design to it using CSS </p>
  
  <pre><code>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"; /* "✓" */ 
  }
  </code></pre>
  
  <p>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?</p>
  
  <p><a href="http://jsbin.com/vogoripi/1/" rel="noreferrer">Demo</a></p>