Styling input radio buttons

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>

score 6 · Accepted Answer · answered Jun 12 '17 at 09:17

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>

This code worked for someone else, so I don't know how that person had it working. But thanks this is great. I'll accept this as the answer as soon as i can. — Reece, Jun 12 '17 at 09:20
Maybe the html structure was different ...according to this css `.radio label input[type='radio']:checked + label:after` a label tag must been right after the input, thats what `+` selector means — Chiller, Jun 12 '17 at 09:24

score 2 · Answer 2 · answered Jun 12 '17 at 09:26

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>

Pete · Answer 3 · 2017-06-12T09:52:47.897

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>

Thanks but I'm not sure I can change the layout of the html. This html is part of a plugin that someone created for the site I'm working on — Reece, Jun 12 '17 at 09:34
Ok, no problems (ps you need to change the html for the other answer too!) — Pete, Jun 12 '17 at 09:35
I don't think a span will affect the plugin. But I will try your code — Reece, Jun 12 '17 at 09:37
For some reason your code doesn't work on my site. The inner circle is not centred in the outer circle and it also doesn't move when I select another option. It works fine in your snippet though. Thanks — Reece, Jun 12 '17 at 09:48

Styling input radio buttons

3 Answers3