<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.