<label class="my-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  みかん
</label>

<label class="my-checkbox">
  <input type="checkbox" checked>
  <span class="checkmark"></span>
  りんご
</label>

<!-- 分かりやすさのために属性は基本的に省略 -->







<!-- Code Kitchenのバナー -->
<a href="https://code-kitchen.dev/" style="display: table; position: fixed; bottom: 2px; right: 5px;" target="_blank"><img src="https://res.cloudinary.com/code-kitchen/image/upload/v1582096487/static/banner.svg" alt="Code Kitchen" width="110" height="30"></a>
.my-checkbox {
  display: block;
  position: relative;
  margin: 1em 0;
  padding-left: 28px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  user-select: none; /* テキストが選択されてしまうのを防ぐ */
  /* inputは非表示にする */
  input {
    display: none;
  }
}

/* □ */
.checkmark {
  position: absolute;
  top: 0; /* 上からの位置 */
  left: 0;
  height: 22px; /* 幅 */
  width: 22px; /* 幅 */
  border: solid 2px #d4dae2; /* 線 */
  border-radius: 4px;
  box-sizing: border-box;
  /* ✓ */
  &:after {
    content: "";
    position: absolute;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    transform: rotate(45deg);
    opacity: 0; /* 透明にしておく */
  }
}


/* チェックが入ったとき */
.my-checkbox {
  /* □ */
  input:checked + .checkmark {
    background: #2e80ff; /* チェック時の色 */
    border-color: #2e80ff; /* チェック時の色 */
  }
  /* ✓ */
  input:checked + .checkmark:after {
    opacity: 1;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.