I have faced the issue with CSS for checkboxes in asp.net mvc. Below is mvc code.
@Html.CheckBoxFor(model => model.GroupClosed)
<label for="GroupClosed" class="block">
Group Closed
</label>
It will render as below:
<div class="checkbox clip-check check-primary">
<span class="control-label" style="color:white"> </span>
<input id="GroupClosed" name="GroupClosed" type="checkbox" value="true"><input name="GroupClosed" type="hidden" value="false">
<label for="GroupClosed" class="block">
Group Closed
</label>
</div>
Before modify the css file as below.
.clip-check input[type="checkbox"]:checked + label:before,
{
border-width: 10px;
}
After modify:
.clip-check input[type="checkbox"]:checked + label:before,
.clip-check input[type="checkbox"]:checked + input[type="hidden"] + label::before {
border-width: 10px;
}
Note that the bold line contains the input[type=”hidden”] which identifies the hidden checkbox and solve the issue. I have added this line and make changes according to css has been written in css file. Happy 🙂