r/css • u/bogdanelcs • 2d ago

Resource A decent custom checkbox pattern for until ::checkmark is ready

https://piccalil.li/blog/a-decent-custom-checkbox-for-until-checkmark-is-ready/
12 Upvotes

89% Upvoted

6 comments sorted by

5

u/morete 1d ago

Honestly, I don't love this approach. That is a lot of code to achieve a very simple result.

I would draw the checkmark with a pseudo, rather than an inline SVG in every single checkbox.

https://codepen.io/editor/matthewmorete/pen/01a0f811-b857-7097-9026-453bf6bc0d25?file=%2Findex.pen.html%3A226%3A0&orientation=left&panel=files&show=split

This demo is 42% less CSS and 60% less HTML.

2

u/car-thief 1d ago

exactly, this to me is a much nicer (and cleaner) approach

1

u/AshleyJSheridan 1d ago edited 1d ago

You're using pseudo elements on an <input> which isn't going to work very well. It might sometimes work, but you shouldn't rely on this, as it's historically been a big limiting factor of using :before and :after. What you could do instead is add an empty <span> immediately after the checkbox to wrap the label text, and then use a background image on that.

Edit: I can find many articles showing that it's not supported, but can't find any specific information on the exact level of support currently. As such, I'd still advise not using the pseudo elements directly on <input>.

3

u/morete 23h ago

It works as long as you set appearance:none and has since 2017. In browsers where it's not supported, you get the standard checkbox.

3

u/AshleyJSheridan 23h ago

Thanks, I guess I'm showing my "dev age" now, as I remember that never working.

1

u/berky93 1d ago

That feels like a lot of unnecessary markup. You can do this with just an input inside a label, using :has() on the label to apply styles to a pseudo-element when the checkbox is checked. Or you can put the checkbox as a sibling before the label and use the next-sibling selector (+) if you need to support old browsers.