checkboxをCSSでスタイリング

デフォルトのcheckboxはdisplay: none;で隠しつつ、::beforeで四角の枠を、::afterでチェックマークを付けていきます。

radioの場合はborder-radius: 50%; で円を作れば良さそうですね。

<label>
    <input type="checkbox" value="項目値" class="check-input">
    <span class="check-span">ちぇっくぼっくす</span>
</label>

.check-input {
  display: none;
}

.check-span{
  padding-left: 37px;
  position:relative;
}

.check-span::before{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 25px;
  height: 25px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f2f2f2
}

.check-input:checked + .check-span::after{
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 9px;
  width: 8px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #999;
  border-right: 3px solid #999;
}