自定义复选框不适用于必需的标记

Question

我有许多复选框，希望客户在成功提交表单之前打勾/标记。我将required添加到了<input>标记中，并在自定义复选框之前按预期工作-带有弹出警报。

但是，自定义复选框以来，我不再收到必需的弹出警报。有什么想法我在这里做错了吗？

image of customised checkboxes

HTML

<label class="label" for="radio-6">
  <input class="checkbox" id="radio-6" type="checkbox" required>
  <span class="custom-checkbox" role="checkbox" aria-checked="false" aria-labelledby="radio-6"></span>
  <span class="checkbox-text">Example text</span>
</label>

CSS / SASS

.label {
   display: block;
   position: relative;
   user-select: none;
   cursor: pointer;
}

.label input {
   position: absolute;
   opacity: 0;
   height: 0;
   width: 0;
}

.custom-checkbox {
   position: absolute;
   border-radius: 50%;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   background-color: $white;
   border: solid 1px $f-color;

   &:after {
      content: "";
      position: absolute;
      display: none;
   }
}

.label input:checked ~ .custom-checkbox {
   background-color: $white;
   border: solid 1px $p-color;
}

.label input:checked ~ .custom-checkbox:after {
   display: block;
}

.label .custom-checkbox:after {
   left: 12px;
   top: -8px;
   width: 7px;
   height: 22px;
   border: solid $p-color;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}