<label class="radio-primary">
  <input type="radio" class="radio-origin">
  <span class="radio-label">Check!</span>
</label>
.radio-primary {
  display: inline-block;
  vertical-align: top;
  min-width: 14px;
  min-height: 14px;
  font-size: 10px;
  line-height: 1;

  .radio-origin {
    display: none;

    &:checked + .radio-label {
      position: relative;

      &::before {
	      background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22%22%3E%20%3Cg%20id%3D%22%26%23x30B0%3B%26%23x30EB%3B%26%23x30FC%3B%26%23x30D7%3B%26%23x5316%3B_2096%22%20data-name%3D%22%26%23x30B0%3B%26%23x30EB%3B%26%23x30FC%3B%26%23x30D7%3B%26%23x5316%3B%202096%22%20transform%3D%22translate%28-383%20-812%29%22%3E%20%3Cg%20id%3D%22%26%23x6955%3B%26%23x5186%3B%26%23x5F62%3B_265%22%20data-name%3D%22%26%23x6955%3B%26%23x5186%3B%26%23x5F62%3B%20265%22%20transform%3D%22translate%28383%20812%29%22%20fill%3D%22none%22%20stroke%3D%22rgb%2850%2C50%2C58%29%22%20stroke-width%3D%221%22%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%227%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226.5%22%20fill%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20id%3D%22%26%23x6955%3B%26%23x5186%3B%26%23x5F62%3B_266%22%20data-name%3D%22%26%23x6955%3B%26%23x5186%3B%26%23x5F62%3B%20266%22%20cx%3D%224%22%20cy%3D%224%22%20r%3D%224%22%20transform%3D%22translate%28386%20815%29%22%20fill%3D%22rgb%2850%2C50%2C58%29%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);
      }
    }
  }

  .radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    min-width: 24px;
    min-height: 24px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;

    &::before {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 5px;
      background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22rgb%2850%2C50%2C58%29%22%20style%3D%22%22%3E%20%3Cg%20id%3D%22%26%23x30B0%3B%26%23x30EB%3B%26%23x30FC%3B%26%23x30D7%3B%26%23x5316%3B_2098%22%20data-name%3D%22%26%23x30B0%3B%26%23x30EB%3B%26%23x30FC%3B%26%23x30D7%3B%26%23x5316%3B%202098%22%20transform%3D%22translate%28-383%20-812%29%22%3E%20%3Cg%20id%3D%22%26%23x6955%3B%26%23x5186%3B%26%23x5F62%3B_265%22%20data-name%3D%22%26%23x6955%3B%26%23x5186%3B%26%23x5F62%3B%20265%22%20transform%3D%22translate%28383%20812%29%22%20fill%3D%22none%22%20stroke%3D%22rgb%2850%2C50%2C58%29%22%20stroke-width%3D%221%22%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%227%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226.5%22%20fill%3D%22none%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E) no-repeat center / 14px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.