Styling input radio buttons [duplicate]

Question

I have already looked on here at how to style the input buttons I found some good answers but for some reason I can not style the inside of the button when checked. Take a look at my code maybe I did something wrong

.radio input[type='radio'] {
  display: none; /*removes original button*/
 }
    
.radio label:before { /*styles outer circle*/
    content: " ";
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    border: 2px solid orange;
    background-color: transparent;
}

.radio label input[type='radio']:checked + label:after { /*styles inside circle*/
    border-radius: 11px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: 10px;
    content: " ";
    display: block;
    background-color: blue;
}

<div class="radio">
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
 </div>

Answer 1

You can't go backwards in css, thats why your code doesn't work

You need to add a span inside the label after your input and you can style it when the radio is checked

see code snippet:

.radio input[type='radio'] {
  display: none;
  /*removes original button*/
}

.radio label:before {
  /*styles outer circle*/
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid orange;
  background-color: transparent;
}

.radio label {
  position: relative;
}

.radio label input[type='radio']:checked+span {
  /*styles inside circle*/
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 1px;
  left: 6px;
  display: block;
  background-color: blue;
}

<div class="radio">
  <label><input type="radio" name="gender" value="male"> Male<span></span></label>
  <label><input type="radio" name="gender" value="female"> Female<span></span></label>
  <label><input type="radio" name="gender" value="other"> Other<span></span></label>
</div>

Answer 2

Please see below.

I have put the label behind the input field and redefined the CSS for label:before when the button is checked. You had the input field as a child of the label but in the CSS it was approached as a sibling.

input[type='radio'] {
  display: none;
}

label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid orange;
  background-color: transparent;
}

input[type='radio']:checked+label:before {
  position: relative;
  border: 2px solid orange;
  border-radius: 11px;
  width: 20px;
  height: 20px;
  top: 5px;
  content: " ";
  display: inline-block;
  background-color: blue;
}

<div class="radio">
  <input id="male" type="radio" name="gender" value="male">
  <label for="male">Male</label>
  <input id="female" type="radio" name="gender" value="female">
  <label for="female">Female</label>
  <input id="other" type="radio" name="gender" value="other">
  <label for="other">Other</label>
</div>