How To Use A Checkmark As A Checkbox In Css

I have a check mark as shown below, I want to use the check mark to act as a check box, I don't want the tick to appear inside a check box. I want to be able to click on the tick s

Solution 1:

Did you mean it?

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}

.checkbox-hidden {
	display: none;
}
.checkbox-hidden:checked + label .checkmark_stem, .checkbox-hidden:checked + label .checkmark_kick {
	background-color: #4caf50;
}

<input type="checkbox" class="checkbox-hidden" id="checkbox"> 
	<label class="checkmark" for="checkbox">
	    <div class="checkmark_stem"></div>
	    <div class="checkmark_kick"></div>
	</label>