Incorporating bootstrap 4, I have implemented a basic set of custom yes/no radio buttons.
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="rd_1" name="rd" class="custom-control-input green" value="Yes">
<label class="custom-control-label" for="rd_1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="rd_2" name="rd" class="custom-control-input red" value="No">
<label class="custom-control-label" for="rd_2">No</label>
</div>
My goal is to change the color of the "Yes" button to green when selected, and the color of the "No" button to red when selected.
https://i.sstatic.net/TkXKP.png
I am able to set a general color for both radio buttons using the provided CSS code below, but I am unsure how to set different colors for each.
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #7B1FA2;
background-color: red;
}