如何调整复选框周围的点击区域？

<label for="checkbox">
  <input type="checkbox" id="checkbox"> 复选框
</label>

<style>
  .checkbox-wrapper {
    position: relative;
  }
  .checkbox-wrapper::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
  }
</style>

<div class="checkbox-wrapper">
  <input type="checkbox">
</div>