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

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

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

ラジオボタン

HTML

<div class="radio">
  <input type="radio" name="radio" class="radio-input" id="radio-01">
  <label for="radio-01">ラジオ01</label>
  <br>
  <input type="radio" name="radio" class="radio-input" id="radio-02">
  <label for="radio-02">ラジオ02</label>
  <br>
  <input type="radio" name="radio" class="radio-input" id="radio-03">
  <label for="radio-03">ラジオ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;
    }
(Visited 186 times, 1 visits today)

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です