CodePen Embed - Custom Checkbox / Radio buttons with SVG

<main class="main">

  <div class="talla">
    <h2 class="title">Tallas</h2>
    <div class="labels-radio-rect talla-instance">
      <label class="label">
        <input class="input" type="radio" name="size-product-01" checked>
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape-rect" />
          </svg>
          <span class="outline">30</span>
        </span>
      </label>
      <label class="label">
        <input class="input" type="radio" name="size-product-01" checked>
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape-rect" />
          </svg>
          <span class="outline">31</span>
        </span>
      </label>
      <label class="label">
        <input class="input" type="radio" name="size-product-01">
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape-rect" />
          </svg>
          <span class="outline">32</span>
        </span>
      </label>
      <label class="label">
        <input class="input" type="radio" name="size-product-01">
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape-rect" />
          </svg>
          <span class="outline">33</span>
        </span>
      </label>
    </div>
  </div>

  <div class="sexo">
    <h2 class="title">Sexo</h2>
    <div class="labels-radio-circle sexo-instance">
      <label class="label">
        <input class="input" type="radio" name="sex">
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <circle class="shape-circle" />
          </svg>
          <span class="outline"></span>
          <span class="input-text">Mujer</span>
        </span>
      </label>
      <label class="label">
        <input class="input" type="radio" name="sex">
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <circle class="shape-circle" />
          </svg>
          <span class="outline"></span>
          <span class="input-text">Hombre</span>
        </span>
      </label>
      <label class="label">
        <input class="input" type="radio" name="sex" checked>
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <circle class="shape-circle" />
          </svg>
          <span class="outline"></span>
          <span class="input-text">Hexadecimal</span>
        </span>
      </label>
    </div>
  </div>

  <div class="politica">
    <h2 class="title">Privacidad</h2>
    <div class="labels-radio-rect labels-radio-rect--row politica-instance">
      <label class="label">
        <input class="input" type="checkbox" name="politica">
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape-rect" />
          </svg>
          <span class="outline"></span>
          <span class="input-text">Casí lo he leído todo</span>
        </span>
      </label>
      <label class="label">
        <input class="input" type="checkbox" name="politica">
        <span class="label__checkmark">
          <svg class="shape" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape-rect" />
          </svg>
          <span class="outline"></span>
          <span class="input-text">Pero aún así lo consiento</span>
        </span>
      </label>
    </div>
  </div>

</main>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	background: #fff;
	color: #242424;
}
h1, h2, h3, h4, h5, h6, p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: 300;
}

:root {
	//--label-radio-rect-w: 56;
	//--label-radio-rect-h: 44;
	//--label-radio-circle-w: 20;
	//--label-radio-circle-r: calc(var(--label-radio-circle-w) / 2);
	//--color-bg-active: rgba(0,0,0,.1);
	//--dasharray-rect: calc(calc(var(--label-radio-rect-w) * 2) + calc(var(--label-radio-rect-h) * 2));
	//--dasharray-circle: calc(2 * 3.14 * var(--label-radio-circle-r));
}

.main {
	display: grid;
	//grid-template-columns: repeat(3, auto);
	place-content: center;
	margin: 1em;
}
.title {
	margin-bottom: .4em;
}
.label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	.input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
		margin: 0;
	}
}

.talla-instance {
	--label-radio-rect-w: 56;
	--label-radio-rect-h: 44;
	--color-bg-active: rgba(0,0,0,.1);
	--dasharray-rect: calc(calc(var(--label-radio-rect-w) * 2) + calc(var(--label-radio-rect-h) * 2));
}

.sexo-instance {
	--label-radio-circle-w: 20;
	--label-radio-circle-r: calc(var(--label-radio-circle-w) / 2);
	--color-bg-active: rgba(0,0,0,.1);
	--dasharray-circle: calc(2 * 3.14 * var(--label-radio-circle-r));
}

.politica-instance {
	--label-radio-rect-w: 24;
	--label-radio-rect-h: 24;
	--color-bg-active: rgba(0,0,0,.1);
	--dasharray-rect: calc(calc(var(--label-radio-rect-w) * 2) + calc(var(--label-radio-rect-h) * 2));
}



.labels-radio-rect {
	display: flex;
	margin-bottom: 1.2em;
	&--row {
		flex-direction: column;
		.label {
			margin-bottom: .4em;
		}
	}
	.label {
		&:not(:last-of-type) {
			margin-right: .6em;
			transition: margin .4s ease;
		}
		display: grid;
		gap: 0;
		position: relative;
		width: calc(var(--label-radio-rect-w) * 1px);
		height: calc(var(--label-radio-rect-h) * 1px);
		cursor: pointer;
		input {
			&:checked ~	.label__checkmark .shape-rect {
				stroke-dashoffset: 0;
				fill: var(--color-bg-active);
			}
			&:focus ~	.label__checkmark .shape-rect {
				fill: var(--color-bg-active);
			}
		}
		&__checkmark {
			display: grid;
			align-items: center;
			width: inherit;
			height: inherit;
			.shape,
			.outline {
				grid-area: 1 / 1 / 2 / 2;
				width: inherit;
				height: inherit;
			}
			.shape-rect {
				width: inherit;
				height: inherit;
				stroke-dasharray: var(--dasharray-rect);
				stroke-dashoffset: var(--dasharray-rect);
				stroke-width: 1px;
				fill: rgba(255,255,255,0);
				stroke: #111;
				transition: stroke-dashoffset 1s;
			}
			.outline {
				font-size: 1em;
				color: #242424;
				width: 100%;
				height: 100%;
				border: .5px solid rgba(0,0,0,.1);
				display: flex;
				justify-content: center;
				align-items: center;
				transition: color .5s ease .1s;
			}
			.input-text {
				grid-area: 1 / 2 / 2 / 2;
				padding-left: 10px;
				white-space: nowrap;
			}
			&:hover .shape-rect {
				stroke-dashoffset: 0;
			}
		}
	}
}


.labels-radio-circle {
	display: flex;
	margin-bottom: 1.2em;
	flex-direction: column;//
	.label {
		&:not(:last-of-type) {
			margin-right: .6em;
			transition: margin .4s ease;
		}
		display: grid;
		gap: 0;
		position: relative;
		width: calc(var(--label-radio-circle-w) * 1px);
		height: calc(var(--label-radio-circle-w) * 1px);
		cursor: pointer;
		font-size: 1em;
		margin-bottom: 10px;//
		input {
			&:checked ~	.label__checkmark .shape-circle {
				stroke-dashoffset: 0;
				fill: var(--color-bg-active);
			}
			&:focus ~	.label__checkmark .shape-circle {
				fill: var(--color-bg-active);
			}
		}
		&__checkmark {
			display: grid;
			align-items: center;
			width: inherit;
			height: inherit;
			.shape,
			.outline {
				grid-area: 1 / 1 / 2 / 2;
				width: inherit;
				height: inherit;
			}
			.shape-circle {
				cx: var(--label-radio-circle-r);
				cy: var(--label-radio-circle-r);
				r: calc(var(--label-radio-circle-r) - .5);
				width: inherit;
				height: inherit;
				stroke-dasharray: var(--dasharray-circle);
				stroke-dashoffset: var(--dasharray-circle);
				stroke-width: 1px;
				fill: rgba(255,255,255,0);
				stroke: #111;
				transition: stroke-dashoffset 1s;
			}
			.outline {
				font-size: 1em;
				color: #242424;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: .5px solid rgba(0,0,0,.1);
				display: flex;
				justify-content: center;
				align-items: center;
				transition: color .5s ease .1s;
			}
			.input-text {
				grid-area: 1 / 2 / 2 / 2;
				padding-left: 10px;
				white-space: nowrap;
			}
			&:hover .shape-circle {
				stroke-dashoffset: 0;
			}
		}
	}
}

View Compiled

This Pen is owned by Iván Albizu on CodePen.

See more by @ivan_albizu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.