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

Ahmad Ajmi · Accepted Answer · 2014-04-13 13:19:11Z

27

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

http://jsbin.com/yuxizazo/1

answered Apr 13, 2014 at 13:19

Ahmad Ajmi

7,2813 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Marshall Over a year ago

another option for anyone else reading this, would be to put a negative margin-right on the checkbox so that a custom checkbox to the right of the original checkbox overlaps it

karolus Over a year ago

@Adam Marshall: I tried this, but didn't fix the height issue. Setting position: absolute worked for me.

Tintin81 Over a year ago

Note that in Apple's Safari you need to enable the tabindex functionality in the Advanced panel of the browser settings first. It took me a while to figure this out.

joe · Accepted Answer · 2014-04-13 11:39:32Z

1

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.

answered Apr 13, 2014 at 11:39

joe

4054 silver badges12 bronze badges

1 Comment

Ahmad Ajmi Over a year ago

I changed it from display: none; to opacity: 0; and it works fine here is the new edited code jsbin.com/yuxizazo/1

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related