【CSS】ラジオボタンとチェックボックスのカスタマイズ方法

ラジオボタンとチェックボックスのカスタマイズ方法をメモしておく。

基本的には、下記のコードを添付するだけでOKだが、場合応じて余白や色を設定する

ラジオボタン

HTML

<div class="radio">
  <input type="radio" name="radio" class="radio-input" id="radio-01">
  <label for="radio-01">ラジオ０１</label>
  <br>
  <input type="radio" name="radio" class="radio-input" id="radio-02">
  <label for="radio-02">ラジオ０２</label>
  <br>
  <input type="radio" name="radio" class="radio-input" id="radio-03">
  <label for="radio-03">ラジオ０３</label>
</div>

SCSS(CSS)

.radio {
      @include pc {
        display: flex;
        align-items: center;
        margin: 20px 0 60px;
      }
      &-input{
        display: none;
        & + label{
          padding-left: 30px;
          position:relative;
          cursor: pointer;
          font-weight: 100;

          &:not(:last-of-type) {
            margin-right: 34px;
          }

          &:before{
            content: "";
            display: block;
            position: absolute;
            top: 0px;
            left: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            background-color: #fff;
            border-radius: 50%;
          }
        }
        &:checked + label::after{
          content: "";
          display: block;
          position: absolute;
          top: 4px;
          left: 4px;
          width: 14px;
          height: 14px;
          background: #ff7700;
          border-radius: 50%;
        }
      }
    }

チェックボックス

HTML

<div class="checkbox">
  <label>
    <input type="checkbox" name="checkbox[]" class="checkbox-input">
    <span class="checkbox-parts">
      <a href="#">利用規約、プライバシーポリシー</a>に同意します
    </span>
  </label>
</div>

SCSS(CSS)

.checkbox {
      text-align: center;
      font-weight: 100;
      a {
        text-decoration: underline;
        color: $black;
        font-weight: 100;
      }
      &-input{
        display: none;
      }
      &-parts{
        padding-left: 26px;
        position:relative;
        &:before{
          content: "";
          cursor: pointer;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 15px;
          height: 15px;
          border: 1px solid #000;
          border-radius: 2px;
          background: #fff;
        }
      }
    }
    .checkbox-input:checked + .checkbox-parts::after{
      content: "";
      display: block;
      position: absolute;
      top: -6px;
      left: 6px;
      width: 6px;
      height: 17px;
      transform: rotate(44deg);
      border-bottom: 2px solid #ff7700;
      border-right: 2px solid #ff7700;
    }