DEV Community

Styling HTML Checkboxes Is Super Easy

Milos Protic on May 10, 2019

Originally posted on my-blog The Old Story Back in the days, HTML components like checkbox were pretty tricky to style the way we wan...

Read full post

Lindsey Kopacz • May 10 '19

Can we access these with a keyboard? I couldn't seem to focus on it unless I was missing something.

I did something different markup wise!

Create custom keyboard accessible checkboxes

Lindsey Kopacz ・ Nov 27 '18 ・ 5 min read

#a11y #frontend #html #webdev

Milos Protic • May 10 '19

I haven't tried it, but don't see a reason why not. Maybe we should try with the tabindex...

Tim Dreipass • May 19 '21

Thanks for this.
I have 2 problems with this:

it doesn't work on iOS, there are shwon 2 checkboxes, the one by brwoser udn the styled new one. What to do?
Layoutproblems with longer Text beside checkbox. The text then flows around the checkbox, which is ugly and I#ld like to have textblock (like in lists).

No icons or unnecessary DOM CSS-only fully stylable checkbox CSS-only fully stylable checkbox CSS-only fully stylable checkbox CSS-only fully stylable checkbox CSS-only fully stylable checkbox CSS-only fully stylable checkbox CSS-only fully stylable checkbox CSS-only fully stylable checkbox

it flows around the checkbox which is ugly. If I set

input[type="checkbox"] + * {display: inline-flex;}

It's a nice textblock, completly (every line) on the right hand of the checkbox. But then (only) the unchecked checkbox gets much to small. If checked it gets in its correct size. Didn't understand this.

Oh, and I must mention, that for reasons of the CMS-Plugin, I do nat have a or other tag available to directly style it. Its just sitting plain inside the -tag.

I can't figure out, how to style the uncheked box properly. Any Ideas?

Thanks!

Best regards from Germany
Tim

Stef Pletinck • May 11 '19

This looks very weird on my Firefox... I get some styled checkbox under your styled checkbox...

Milos Protic • May 11 '19

Which version do you have? It is fine on my end.

Stef Pletinck • May 11 '19

67.0B16 (developer edition), It's real weird

Milos Protic • May 11 '19 • Edited

Hm...mine is 66.0.5 (64-bit). Maybe something has changed in the newer version...Let's wait for the official version and see if the issue persists

Ben Nadel • Feb 23 '20

Very cool! I'm loving this webkit-appearance stuff. I can't believe I only just found out about it.

Milos Protic • Feb 27 '20

Thanks! Glad you find it useful :) CSS is evolving, that's for sure

bleedeleventh • Apr 14 '21

That was very helpful, many thanks!

reflectingwalls • Nov 17 '19

Hello! This works great, except the checkmark unicode is not showing up no matter what I do. Can you help?

Milos Protic • Nov 17 '19 • Edited

Hi, what browser are you using? Does the fiddle work for you, or the checkmark is not showing there as well?

Stephanie Tuerk • Jan 22 '20

FYI the problem here is that the checkmark is position: absolute. Works in your JSFiddle because the box itself is in the top left corner of the window. Becomes a problem if your button is elsewhere on the page.

But thank you so much for throwing this together!!! Super useful.

Milos Protic • Jan 22 '20

Thanks, glad you find it useful :)

I've just tried to change the position and and added margin-top: 150px; margin-left: 150px to the .checkbox class and it worked fine. I tried it in chrome.