HTML input要素をラップしたlabel要素

<label>
  <input type="checkbox">
  <div>testtesttesttesttesttesttesttest</div>
</label>

input要素をlabel要素でラップするとラベル要素自体がチェックボックスのクリック判定対象となる

※divなど他タグではクリック判定対象とはならない

<div>
  <input type="checkbox">
  <div>testtesttesttesttesttesttesttest</div>
</div>

::beforeなどと組み合わせてinput要素自体は非表示とすることで カスタマイズしたチェックボックスを作成できる

//参考URL
https://saruwakakun.com/html-css/basic/before-after#section2