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

问题

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

回答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

回答2:

It's because you have "display:none;" set on the actual checkbox.

If you remove that it works fine: http://jsbin.com/vogoripi/2

If you do want to use another method for styling checkboxes while keeping this functionality you should maybe look at a plugin like: http://uniformjs.com/

I would suggest leaving them as is and just leaving the standard checkbox, as you may run in to problems further down the line.

来源：https://stackoverflow.com/questions/23042212/checkbox-tab-index-not-working-when-set-to-hidden-with-custom-design