Having an issue with my custom checkbox where only the first one gets selected when I select the bottom checkbox. I suspect it might be a styling problem, but I'm unsure. I've recreated the issue in a sandbox for you to check out: https://codesandbox.io/s/adoring-pine-hqxwt
<label htmlFor="checkbox">
<div className="checkbox-container">
<input
className="checkbox-hidden"
id="checkbox"
type="checkbox"
checked={checked}
onChange={onchange}
/>
<div className="checkbox-styled">
<svg
className="checkbox-icon"
style={{ visibility: checked ? "visible" : "hidden" }}
viewBox="0 0 24 24"
>
<polyline points="20 6 9 17 4 12" />
</svg>
</div>
</div>
<span>{label}</span>
</label>
.checkbox-icon {
fill: none;
stroke: #177ff0;
stroke-width: 2px;
}
.checkbox-container {
display: inline-block;
vertical-align: middle;
}
.checkbox-hidden {
border: 0;
clip: rect(0 0 0 0);
// clippath: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.checkbox-styled {
display: inline-block;
width: 16px;
height: 16px;
background: salmon;
border-radius: 3px;
transition: all 150ms;
border-radius: 1px;
border: 1px solid #dbeaf4;
background-color: transparent;
:hover {
border-color: #4da1ff;
}
}