CODEWITHSUNDEEP
csshtml
namrata
namrata

Reputation: 2545

Unable to focus on a checkbox with tabindex

I am unable to focus on a checkbox with tabindex=0. I think this is due to display and opacity setting 

.newCheckbox input[type=checkbox] {
   display: none;
    opacity: 0;
}

I also have a label before the checkbox. Is it possible to change the code to make the checkbox label appear highlighed - to give an appearance as if the checkbox is highlighted on tab.

plunkr - https://plnkr.co/edit/6ecZu1G8tKzztGGbK4G3?p=preview

Upvotes: 1

Views: 6061

Answers (1)

Isaac Minogue
Isaac Minogue

Reputation: 1579

Not sure why you'd want to do this, but you could change the opacity of the checkbox to 1 on focus like so:

input[type=checkbox] {
  opacity: 0;
}

input[type=checkbox]:focus {
   opacity: 1;
}

That wouldn't change the fact it's actually not visible by the user initially though, unless they key into it by chance with their keyboard!

I'd probably suggest hiding the input with one of these techniques instead, writing your markup like this:

<input type="checkbox" id="title"><br>
<label for="title">Male</label>

And then styling the label with the immediate sibling selector + ie

[type=checkbox] + label {
  //custom css here 
}

The label will get focus instead of the input, and you have much more control over styling :)

Upvotes: 2

Related Questions