Agfdhyk

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

Found how to target the checked radio button css

input[type=radio]:checked + label {

  ...code here

}