How create custom checkbox with background using Styled Components?

Question

I've create checkbox with background, but when checkbox is active you can't uncheck it clicking on icon. You can uncheck only clicking Label text and I can't figure out what is wrong with

CodeSandbox

If you used the label to create a custom checkbox from a pseudo, it would work without javascript. . You need to link the label with the input via for/id .input can be anywhere else and hidden in the document flow. here is an exemple : codepen.io/gc-nomade/pen/NWNqBMp . Reminder about the label use and role : developer.mozilla.org/en-US/docs/Web/HTML/Element/label ;) From a clean and simple code, it works much easier and lets less side effects appear — G-Cyrillus
– G-Cyrillus, Commented Aug 10, 2020 at 16:10
<label><div class="sc-bdVaJa hbGCZo"><input type="checkbox" class="sc-bwzfXH eKbAYW"><label for=".sc-bwzfXH" class="sc-htpNat giviEY"></label><div class="sc-bxivhb dSZONO"></div></div><span style="margin-left: 10px;">Label Text</span></label>is the code generated in your codesandbox :( — G-Cyrillus
– G-Cyrillus, Commented Aug 10, 2020 at 16:21
The problems is I'm using styled-components, not code generator. It's app-orientiered CSS-in-JS. So, I'm writing code in CSS-in-JS and you give me examples of clear CSS which not completely works like CSS-in-JS — Alex Flow
– Alex Flow, Commented Aug 10, 2020 at 16:34
you can create via js/php/any programming language a proper markup. It will become a must once you'll be tired loosing time crowling through your code(or someone's else) when another bug or update shows up ;) For fun, it doesn't matter, for a compagny it's money ;) — G-Cyrillus
– G-Cyrillus, Commented Aug 10, 2020 at 16:39

Menawer · Accepted Answer · 2020-08-10 15:59:42Z

2

Its because your label is blocking the clicking event, try adding

pointer-events: none;

to your Label component

answered Aug 10, 2020 at 15:59

Menawer

8934 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How create custom checkbox with background using Styled Components?

CodeSandbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related