How to make a custom radio input with label-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>