Custom radio button

<label class="label">
<!-- The real radio -->
<input type="radio" class="label__input" />
<!-- The fake circle -->
<div class="label__circle">
<!-- The inner circle -->
<div class="label__radio label__radio--selected"></div>
</div>
<!-- The text -->
...
</div>
.label {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
/* Cursor */
cursor: pointer;
}
.label__input {
/* Hide it */
display: none;
}
.label__circle {
/* Rounded border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
/* Spacing */
margin-right: 8px;
padding: 4px;
}
.label__radio {
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
/* For not selected radio */
background-color: transparent;
}
.label__radio--selected {
/* For selected radio */
background-color: #00449e;
}

See also

Custom checkbox button

Radio button group