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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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 🙂