In order to achieve the desired effect where the white part should appear on the tick, initially the entire thing should be black and then turn white upon clicking. I am currently working on this in Storybook and would appreciate help with positioning. https://i.sstatic.net/NHjPI.png
<span className={css.cb}>
<input type="checkbox" value="1" id="checkboxInput" name=""/>
<label for="checkboxInput"></label>
</span>
Here is the CSS !
@import "base.scss";
.cb {
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
left: 10px;
top: 5px;
background: #000000;
border-radius: 5px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.75);
}
.cb label {
display: inline-block;
position: absolute;
width: 12px;
height: 12px;
left: 4px;
top: 10px;
background: #000000;
border-radius: 5px;
}
.cb input[type=checkbox]:checked + label {
background: #FFFFFF;
}