Discussion on: Create custom keyboard accessible checkboxes

[Andrew Bone]

I will always upvote a11y content, I think it's so important.

I'm on mobile so I'll try and keep this short

One thing I would change with your code would be to not paint the check every time. To do this I'd change the CSS to something like

input[type="checkbox"] + label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 27px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  height: 6px;
  width: 13px;
  transform: rotate(-45deg);
  opacity: 0;
}
input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

It's a lot easier for the browser to change the opacity than it is to make the tick anew each time. Though it's fair to say no one would notice any improvement in performance I just prefer to do it that way as a style preference.

[Lindsey Kopacz]

Hmm! That's a good point, I also like that :).

[Andrew Bone]

Right, now that I'm on a desktop this is how I tend to do things

jsfiddle.net/link2twenty/3nrczx2q/

The main difference is the way I handle the HTML

<label class="md_checkbox">
  <input type="checkbox" />
  <span class="md_checkbox__tick"></span>
  Checkbox
</label>

I do it this way so you don't have to have an ID for each checkbox.

Are you planning on turning this into a series for different input types?

[Lindsey Kopacz]

I have to read more into this and do some testing, I've always been yelled at for not having associations between inputs and labels, but I can see why having an ID for every checkbox may get annoying.

I have to sign into the day job, but I wanna look into this tonight and get back to you :)

[Lindsey Kopacz]

Also, can I say the fact that you typed out the code on your phone is impressive!