Styling input radio buttons [duplicate] - html

Question

This question already has answers here:
CSS - How to Style a Selected Radio Buttons Label?
(8 answers)
Closed 4 years ago.
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>

Answer 3

So your selector is incorrect and so is your html structure. You need to move your labels after your inputs (and target the input using a for attribute on the label and id on the input), then remove the first label from your selector
I have commented the css I have changed below
.radio input[type='radio'] {
display: none; /*removes original button*/
}
.radio label { /* add this so dot is relative to the label */
position: relative;
display: inline-block;
}
.radio label:before { /*styles outer circle*/
content: " ";
display: inline-block;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid orange;
background-color: transparent;
vertical-align:middle; /* add this so text is vertically centred next to ring */
}
/* remove the first label from this selector */
.radio input[type='radio']:checked + label:after { /*styles inside circle*/
border-radius: 50%;
width: 12px;
height: 12px;
position: absolute;
top: 6px; /* I have changed the top and left so this is in the centre */
left: 6px;
content: " ";
display: block;
background-color: blue;
}
<div class="radio">
<input type="radio" name="gender" value="male" id="male"><label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female"><label for="female"> Female</label>
<input type="radio" name="gender" value="other" id="other"><label for="other"> Other</label>
</div>