CSS styling radio input when checked - html

Question

I have styled the following radio buttons so that the actual radio is display:none and the label is an inline-block with a background-color.
I am struggling to find how to show a different background colour on the checked radio button.
Obviously its a simple thing that I am missing:
input[type="radio"] {
display: none;
}
label + checked {
background-color: #ffcb00;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
label {
background-color: #f2f2f2;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
<label>
<input type="radio" name="amount" value="100" checked />
<b>£100</b>
</label>
<label>
<input type="radio" name="amount" value="250" />
<b>£250</b>
</label>
<label>
<input type="radio" name="amount" value="500" />
<b>£500</b>
</label>
<label>
<input type="radio" name="amount" value="1000" />
<b>£1,000</b>
</label>
<label>
<input type="radio" name="amount" value="1500" />
<b>£1,500</b>
</label>
<br>
<br>
<label>
<input type="radio" name="term" value="30" checked />
<b>30 days</b>
</label>
<label>
<input type="radio" name="term" value="60" />
<b>60 days</b>
</label>
<label>
<input type="radio" name="term" value="90" />
<b>90 days</b>
</label>
<label>
<input type="radio" name="term" value="180" />
<b>180 days</b>
</label>
<label>
<input type="radio" name="term" value="360" />
<b>360 days</b>
</label>

Answer 1

Since the label is the parent of the input[type="checkbox"] you can't select it directly in CSS. One option of fixing this would be the following. Add an extra div to the label (.background in my example) and use that to change the background color. Of course there are many more options to fix this, but this is probably the simplest one.
input[type="radio"] {
display: none;
}
.background{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
background-color: #f2f2f2;
}
input[type="radio"]:checked + .background{
background-color: #ffcb00;
}
label {
position: relative;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
label *{
position: relative;
}
<label>
<input type="radio" name="term" value="30" />
<div class="background"></div>
<b>30 days</b>
</label>
<label>
<input type="radio" name="term" value="30" checked />
<div class="background"></div>
<b>30 days</b>
</label>

Answer 2

You're using the + selector incorrectly. a + b means select any element b immediately following an a, for example:
<a></a>
<b></b>
By changing your HTML so that labels immediately follow radio buttons, we're able to use the pseudo-selector :checked to detect when a radio button is checked and style the label appropriately.
Note that I also added for attributes to your labels and ids to the radio buttons to create an association between the two.
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: #ffcb00;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
label {
background-color: #f2f2f2;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
<input type="radio" name="amount" id="amount1" value="100" />
<label for="amount1">£100</label>
<input type="radio" name="amount" id="amount2" value="250" />
<label for="amount2">£250</label>