Radio button styles not getting changed - css

Question

I'm trying to implement custom styles for radio buttons.
I've almost achieved it but issue is when i try to click on other radio button it is not getting highlighted.
I'm struck here please help.
.radio-radio-wrapper {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-radio-wrapper input[type='radio'] {
display: none;
}
.radio-radio-wrapper 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 #004c97;
background-color: transparent;
cursor: pointer;
}
.radio-radio-wrapper input[type=radio]:checked+span>label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 4px;
content: " ";
display: block;
background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
<span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity & Partial Service</label></span>
</span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Full Network Service (No Capacity)</label></span>
</span>
</div>

Answer 1

You forgot the unique id's. Both id's are radio1. You should set it to radio1 and radio2 and so on.
And don't forget the labels for property to link to the correct input field. See below.
.radio-radio-wrapper {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-radio-wrapper input[type='radio'] {
display: none;
}
.radio-radio-wrapper 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 #004c97;
background-color: transparent;
cursor: pointer;
}
.radio-radio-wrapper input[type=radio]:checked+span>label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 4px;
content: " ";
display: block;
background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
<span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity & Partial Service</label></span>
</span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
</span>
</div>

Answer 2

Here is the perfectly working code for your quick reference
.radio-radio-wrapper {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-radio-wrapper input[type='radio'] {
display: none;
}
.radio-radio-wrapper 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 #004c97;
background-color: transparent;
cursor: pointer;
}
.radio-radio-wrapper input[type=radio]:checked+span>label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 11px;
left: 12px;
content: " ";
display: block;
background: #004c97;
}
<div _ngcontent-c9="" class="col-lg-12 radioBlock">
<span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity & Partial Service</label></span>
</span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
<input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
<span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
</span>
</div>