Cannot click to customized checkbox

Cannot click on my customized checkbox.

I've used this example in my simple app but it doesn't work.

I've tried to change:

• z-index for elements near checkbox
• block to flex
• google it about 2 hours

but it doesn't work.

Code below perfectly works in: codepen, stack but doesn't work in my app

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]+label {
  cursor: pointer;
}

input[type="checkbox"]+label:before {
  background: #fff;
  height: 21px;
  border: 1px solid red;
  content: " ";
  display: inline-block;
  width: 21px;
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
  top: -1px;
}

input[type="checkbox"]:checked+label:before {
  content: "\2713";
  color: red;
  font-size: 24px;
  text-align: center;
  line-height: 21px;
}

<input type="checkbox" name="custom_checkbox" id="custom_checkbox" value="custom_checkbox">
<label for="custom_checkbox">My Custom Checkbox</label>

Fast links:

• my app
• example of checkbox on codepen