checkboxへCSSを当てる

最近業務でマークアップする作業が多いのですが、その中でcheckboxへCSSを当てるのってどうやるんだっけと思いメモがてら書いていきます

ソースコード

....
....
  <body>
    <div class="warap">
      <div class="item">
        <input type="checkbox" name="hoge" id="item01" />
        <label for="item01">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
      <div class="item">
        <input type="checkbox" name="hoge" id="item02" />
        <label for="item02">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
      <div class="item">
        <input type="checkbox" name="hoge" id="item03" />
        <label for="item03">
          <h3 class="title">
            タイトル
          </h3>
          <p class="desc">
            テキストテキストテキストテキストテキスト
          </p>
        </label>
      </div>
    </div>
  </body>
  <style>
    .warap {
      display: flex;
    }
    .item {
      width: 31%;
      margin: 0 1%;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      text-align: center;
      border-radius: 10px;
    }
    input[type="checkbox"] {
      display: none;
    }
    input[type="checkbox"] + label {
      display: none;
      cursor: pointer;
      display: inline-block;
      position: relative;
    }
    input[type="checkbox"] + label::before {
      content: "";
      position: absolute;
      display: block;
      box-sizing: border-box;
      width: 24px;
      height: 24px;
      margin-top: -10px;
      right: 10px;
      top: 20px;
      background-color: blue;
      border-radius: 50%;
    }
    input[type="checkbox"]:checked + label::before {
      background-color: blue;
    }
    input[type="checkbox"]:checked + label::after {
      content: "";
      position: absolute;
      display: block;
      box-sizing: border-box;
      width: 13px;
      height: 7px;
      margin-top: 0px;
      top: 17px;
      right: 15px;
      transform: rotate(-45deg);
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      background-color: blue;
    }
  </style>
  <script type="text/javascript"></script>
</html>

input要素をdisplay: none;して、擬似要素を使いボタンを一から作成していくような感じになります。

ブログの投稿ログ

# ソースコード

ソースコード