Showed Checked Radio Button - Ninja Forms

Question

I've made my radio buttons to full width, which wrap around the text, making entire text a radio button.

This is the code I used to make radio buttons look like buttons:

.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf- 
field-element li label {
margin-left:0em;}

label.radio {
cursor: pointer;
}

label.radio input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}


.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf- 
field-element li label {
padding: 7px 14px;
border: 2px solid #EEE;
display: inline-block;
color: #009BA2;
border-radius: 3px;
text-transform: uppercase;
text-align:center;
}

input[type=checkbox], input[type=radio] {
visibility: hidden;
margin: 0;
width: 0!important;
}

input[type=checkbox] + label, input[type=radio] + label { 
font-size: 16px; 
}

input[type=checkbox] + label:hover, input[type=radio] + label:hover { 
cursor: pointer; }

input[type=checkbox] + label:before, input[type=radio] + label:before{
font-family: "ETmodules";
font-size: 36px;
position: relative;
top: 0.3em;
margin-right: 0.2em;
}

However, I cannot manage to change border-color of box when radio button is selected.

html for radio buttons

<div class="nf-field-element"><ul aria-describedby="nf-error-37">

<li>
    <input type="radio" id="nf-field-37-0" name="nf-field-37" class="ninja-forms-field nf-element nf-checked" value="Physical Product" aria-labelledby="nf-label-class-field-37-0">
    <label for="nf-field-37-0" id="nf-label-class-field-37-0" class="nf-checked-label">Physical Product</label>
</li>
<li>
    <input type="radio" id="nf-field-37-1" name="nf-field-37" class="ninja-forms-field nf-element" value="Digital Product" aria-labelledby="nf-label-class-field-37-1">
    <label for="nf-field-37-1" id="nf-label-class-field-37-1" class="">Digital Product</label>
</li>
<li>
    <input type="radio" id="nf-field-37-2" name="nf-field-37" class="ninja-forms-field nf-element" value="Subscription" aria-labelledby="nf-label-class-field-37-2">
    <label for="nf-field-37-2" id="nf-label-class-field-37-2" class="">Subscription</label>
</li>
<li>
    <input type="radio" id="nf-field-37-3" name="nf-field-37" class="ninja-forms-field nf-element" value="Service" aria-labelledby="nf-label-class-field-37-3">
    <label for="nf-field-37-3" id="nf-label-class-field-37-3" class="">Service</label>
</li>
</ul></div>

this class is added to input when clicked

nf-checked

and this class is added to label when clicked

nf-checked-label

Answer 1

Found how to target the checked radio button css

input[type=radio]:checked + label {
  ...code here
}