It's a nice textblock, completly on the right ahnd 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?
Try adding an input[type="checkbox"] + *::before { flex-shrink: 0; } to make sure the checkbox doesn't get shrunk as part of flex attempting to squeeze so much content into its container. (I've updated my code pen to add these two changes so you can see it in action)
Hello Nathan,
thanks! Clear and simpel. Never heard about flex-shrink...
Do you have an explanation why I get shown 2 checkboxes on iOS-Devices? Fist ist appearance-stylend second by own css. So /display: none/ seems to be ignored. But also /-webkit-appearance: none/ doesn't work.
This happens not in OS X or WIN PCs only iOS (iPad, iPhone)...
Tim, I'm not sure; there must be some vendor specific style to hide the checkbox on iOS/Safari. I don't have an iOS device to test this on; if you do have a solution I'd love to incorporate it into this example for everyone to learn from.
Hi Nathan,
it works perfectly when the multi-lined text ist within its own tag (in your example ). But my form-plugin doesn't cover the text, so it just stays plain between input and label. In this case your solution doesn't work (just delete the span-tag in your example and see what happens).
Any ideas?
Best regards
Tim
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Nathan,
nice and clean, I like that.
But without "-webkit-appearance: none;" it doesn't work on iOS?
Iill find a solution for that. My question:
How to style longer text? If I had a longer text,
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 on the right ahnd 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
Hi Tim,
Try adding an
input[type="checkbox"] + *::before { flex-shrink: 0; }to make sure the checkbox doesn't get shrunk as part of flex attempting to squeeze so much content into its container. (I've updated my code pen to add these two changes so you can see it in action)Hello Nathan,
thanks! Clear and simpel. Never heard about flex-shrink...
Do you have an explanation why I get shown 2 checkboxes on iOS-Devices? Fist ist appearance-stylend second by own css. So /display: none/ seems to be ignored. But also /-webkit-appearance: none/ doesn't work.
This happens not in OS X or WIN PCs only iOS (iPad, iPhone)...
Best regards
Tim
Tim, I'm not sure; there must be some vendor specific style to hide the checkbox on iOS/Safari. I don't have an iOS device to test this on; if you do have a solution I'd love to incorporate it into this example for everyone to learn from.
If I get your example run (without span-tag), I'll surely find a solution and will let you know.
Hi Nathan,
it works perfectly when the multi-lined text ist within its own tag (in your example ). But my form-plugin doesn't cover the text, so it just stays plain between input and label. In this case your solution doesn't work (just delete the span-tag in your example and see what happens).
Any ideas?
Best regards
Tim