<div class="container">
  <label for="radio-1" class="radio-label">
    <input checked type="radio" id="radio-1" class="radio" name="category_id">
    <span class="label-check round">
      ラジオボタン1
    </span>
  </label>
  <label for="radio-2" class="radio-label">
    <input type="radio" id="radio-2" class="radio" name="category_id">
    <span class="label-check square">
      ラジオボタン2
    </span>
  </label>
  <label for="radio-3" class="radio-label">
    <input type="radio" id="radio-3" class="radio" name="category_id">
    <span class="label-check check">
      ラジオボタン3
    </span>
  </label>
</div>
.container {
  display: flex;
  padding: 20px;
  box-sizing: border-box;
}

.radio-label {
  position: relative;
  min-width: 10%;
  margin: 10px;

  .label-check {
    position: relative;
    display: block;
    padding-left: 35px;
    cursor: pointer;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      display: block;
      margin: auto;
      width: 24px;
      height: 24px;
    }
    &.round {
      &:before {
        border: 1px solid #ddd;
        border-radius: 50%;        
      }
    }
    &.square {
      &:before {
        border: 1px solid #ddd;
        transform: rotate(45deg);
      }
    }
    &.check {
      &:before {
        border: 1px solid #ddd;
      }
    }
  }

  input[type="radio"].radio {
    display: none;

    &:checked {
      + .label-check {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 5px;
          display: block;
          margin: auto;
        }
        &.round {
          &:after {
            width: 16px;
            height: 16px;
            background-color: #4abdac;
            border-radius: 50%;
          }
        }
        &.square {
          &:after {
            width: 16px;
            height: 16px;
            background-color: #4abdac;
            transform: rotate(45deg);
          }
        }
        &.check {
          &:after {
            top: -10px;
            width: 16px;
            height: 24px;
            border-bottom: 5px solid #4abdac;
            border-right: 4px solid #4abdac;
            transform: rotate(45deg);
          }
        }
      }
    }
  }
}
  
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.