Показана кнопка "Проверено" - формы ниндзя

Question

Я установил переключатели на полную ширину, которые обертывают текст, делая весь текст переключателем.

Вот код, который я использовал, чтобы переключатели выглядели как кнопки:

.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;
}

Тем не менее, я не могу изменить цвет рамки, когда выбран переключатель.

HTML для радио кнопок

<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>

этот класс добавляется к вводу при нажатии

nf-checked

и этот класс добавляется в ярлык при нажатии

nf-checked-label

Answer 1

Нашел как нацелиться на проверенную радио кнопку css

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