DEV Community

Discussion on: Styling HTML Checkboxes Is Super Easy

Collapse
 
tim_dreipass_b998402cb44a profile image
Tim Dreipass

Thanks for this.
I have 2 problems with this:

  1. it doesn't work on iOS, there are shwon 2 checkboxes, the one by brwoser udn the styled new one. What to do?

  2. 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