css change checked radio button background - css

Question

I use the following custom-radio want to change checked button background to blue
.custom-radio label {
color: #FFF;
border-radius: 20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size: 10pt;
font-family: arial;
background-color: gray;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: none;
}
.custom-radio label>input[type="radio"]:checked {
background-color: blue !important;
}
<div class="radio-button-group ">
<div data-toggle="buttons" class="btn-group custom-radio">
<label class="btn border ">
<input type="radio" name="direction" id="direction-0" checked value="left">
<span>left</span>
</label>
<label class="btn border">
<input type="radio" name="direction" id="direction-1" value="top">
<span>right</span>
</label>
</div>
</div>
when custom-radio checked background color changed
active custom-radio want to change checked background to blue

Answer 1

You would need to move your styles to the span rather than have them on the label then you can use input[type="radio"]:checked + span to change the background colour
.custom-radio span {
color: #FFF;
border-radius: 20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size: 10pt;
font-family: arial;
background-color: gray;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: none;
}
.custom-radio input[type="radio"]:checked+span {
background-color: blue;
}
<div class="radio-button-group ">
<div data-toggle="buttons" class="btn-group custom-radio">
<label class="btn border ">
<input type="radio" name="direction" id="direction-0" checked value="left">
<span>left</span>
</label>
<label class="btn border">
<input type="radio" name="direction" id="direction-1" value="top">
<span>right</span>
</label>
</div>
</div>