How to make a custom radio input with label - html

Question

I am trying to perform a custom radio input for gender, a user can only choose either between "female" and "male", but I realized that I cant see the checked radio to display when I click on it seems not to work (to be selected) when I click on it, I tried to find out what is causing the radio not to be checked but I can't find it out. It used to work with the checkboxes inputs could anyone help me please, I am probably missing something.
.profile__input .input__radio {
display: inline-block;
}
.blu-radio {
width: auto;
margin: 16px 16px 16px 0;
display: inline-flex;
position: relative;
}
.blu-radio:not(.b-disabled) {
cursor: pointer;
}
.blu-radio .blu-radio-container {
width: 20px;
min-width: 20px;
height: 20px;
position: relative;
border: 2px solid transparent;
border-radius: 50%;
transition: .4s cubic-bezier(0.25, 0.8, 0.25, 1);
border-color: #e0e0e0;
}
.blu-radio .blu-radio-container:before,
.blu-radio .blu-radio-container:after {
position: absolute;
transition: .4s cubic-bezier(0.55, 0, 0.55, 0.2);
content: " ";
}
.blu-radio .blu-radio-container:before {
width: 48px;
height: 48px;
top: 50%;
left: 50%;
z-index: 11;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.blu-radio .blu-radio-container input {
position: absolute;
left: -999em;
}
.blu-radio .blu-radio-container:after {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
border-radius: 50%;
opacity: 0;
transform: scale3D(0.38, 0.38, 1);
content: " ";
}
.blu-radio .blu-radio-label {
padding-left: 8px;
position: relative;
line-height: 20px;
}
.blu-radio:not(.b-disabled) .blu-radio-label {
cursor: pointer;
color: rgba(0, 0, 0, 0.6);
}
<div class="profile__input">
<div class="input__title tx-gray">Genre</div>
<div class="input__radio">
<div class="blu-radio">
<div class="blu-radio-container">
<input type="radio" id="blu-radio-3as6fzz1" name='gender'>
</div>
<label for="blu-radio-3as6fzz1" class="blu-radio-label">Homme</label>
</div>
</div>
<div class="input__radio">
<div class="blu-radio">
<div class="blu-radio-container">
<input type="radio" id="blu-radio-v0okyps4r" name='gender'>
</div>
<label for="blu-radio-v0okyps4r" class="blu-radio-label">Femme</label>
</div>
</div>
</div>

Answer 1

Try this code instead, i'm using the input:checked to test if the radio is checked or not then i append to the fake radio a background color.
I put the fake radio container into the label, so when you click on it, it will check the real radio button wich is hidden.
.profile__input .input__radio {
display: inline-block;
}
.blu-radio {
width: auto;
margin: 16px 16px 16px 0;
display: inline-flex;
position: relative;
}
.blu-radio:not(.b-disabled) {
cursor: pointer;
}
.blu-radio .blu-radio-container {
width: 20px;
min-width: 20px;
height: 20px;
position: relative;
border: 2px solid transparent;
border-radius: 50%;
transition: .4s cubic-bezier(0.25, 0.8, 0.25, 1);
border-color: #e0e0e0;
display: inline-block;
position: relative;
top: 6px;
}
.blu-radio .blu-radio-container:before,
.blu-radio .blu-radio-container:after {
position: absolute;
transition: .4s cubic-bezier(0.55, 0, 0.55, 0.2);
content: " ";
}
.blu-radio .blu-radio-container:before {
width: 48px;
height: 48px;
top: 50%;
left: 50%;
z-index: 11;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.blu-radio input {
display: none;
}
.blu-radio .blu-radio-container:after {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
border-radius: 50%;
opacity: 0;
transform: scale3D(0.38, 0.38, 1);
content: " ";
}
.blu-radio .blu-radio-label {
padding-left: 8px;
position: relative;
line-height: 20px;
}
.blu-radio input:checked + .blu-radio-label .blu-radio-container {
background: red;
}
.blu-radio:not(.b-disabled) .blu-radio-label {
cursor: pointer;
color: rgba(0, 0, 0, 0.6);
}
<div class="profile__input">
<div class="input__title tx-gray">Genre</div>
<div class="input__radio">
<div class="blu-radio">
<input type="radio" id="blu-radio-3as6fzz1" name='gender'>
<label for="blu-radio-3as6fzz1" class="blu-radio-label">
<span class="blu-radio-container"></span> Homme
</label>
</div>
</div>
<div class="input__radio">
<div class="blu-radio">
<input type="radio" id="blu-radio-v0okyps4r" name='gender'>
<label for="blu-radio-v0okyps4r" class="blu-radio-label">
<span class="blu-radio-container"></span> Femme
</label>
</div>
</div>
</div>

Answer 2

a basic one...
* {
font-size : 20px;
}
label > input[type="radio"] { display : none; }
label > input[type="radio"] + span {
--diameter : 1.4em;
display : inline-block;
height : var(--diameter);
line-height : var(--diameter);
cursor : pointer;
width : 6.2em;
position : relative;
box-sizing : border-box;
padding-left : calc(var(--diameter) + .3em);
color : #7d7d7d;
}
label > input[type="radio"]:checked + span {
color : black;
}
label > input[type="radio"] + span:before {
box-sizing : border-box;
width : var(--diameter);
height : var(--diameter);
border : 1px solid #7d7d7d;
border-radius : 50%;
position : absolute;
top : 0;
left : 0;
content : ' ';
}
label > input[type="radio"]:checked + span::after {
box-sizing : border-box;
position : absolute;
top : .1em;
left : .1em;
content : ' ';
width : calc(var(--diameter) - .2em);
height : calc(var(--diameter) - .2em);
border-radius : 50%;
background-color : #eb1641;
}
<label>
<input type="radio" name="gender">
<span>Homme</span>
</label>
<label>
<input type="radio" name="gender">
<span>Femme</span>
</label>