input要素だけでcheckboxをカスタムしたい

Copied!

<input type="checkbox"/>

Copied!

input[type='checkbox'] {
  appearance: none;
  outline: none;

  display: block;
  position: relative;
  text-align: center;
  cursor: pointer;

  width: 28px;
  height: 28px;
  margin: 0 auto;
}

// チェックボックスのデザイン
input[type='checkbox']::before {
  display: block;
  position: absolute;
  content: '';

  width: 28px;
  height: 28px;
  background: #fff;
  border: solid 2px #01a2c1;
  border-radius: 3px;
}

// チェックボックスの背景をチェック後に変更
input[type='checkbox']:checked::before {
  background-color: #01a2c1;
}

// チェックマークのデザイン
input[type='checkbox']::after {
  display: block;

  content: '';
  position: absolute;
  left: 10px;
  top: 5px;

  width: 8px;
  height: 16px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);

  // チェックしてないときは隠す
  opacity: 0;
}

// チェックするとチェックマークの透明化を解除
input[type='checkbox']:checked::after {
  opacity: 1;
}