Change css of radiolist in yii2 - css

Question

I have some radiolist in yii2 as following -
<?php
echo $form->field($model, 'wp_spost1')->radioList(['Yes'=>'Yes','No'=>'No','NA'=>'NA'])->label(false);
?>
It dissolves to following HTML
<div id="workpermit-wp_spost1" aria-required="true" aria-invalid="false"><div class="radio"><label><input type="radio" name="Workpermit[wp_spost1]" value="Yes" data-index="0"> Yes</label></div>
<div class="radio"><label><input type="radio" name="Workpermit[wp_spost1]" value="No" data-index="1"> No</label></div>
<div class="radio"><label><input type="radio" name="Workpermit[wp_spost1]" value="NA" checked="" data-index="2"> NA</label></div></div>
The css I'm trying to use is below -
.radio label
{
position:relative;
display: inline-block;
margin: 2px 2px;
padding: 2px;
width: 35px;
background: #ffffff;
border: 1px solid #008eff;
border-radius: 4px;
}
.radio input[type="radio"]:checked
{
box-shadow: 0 0 0 3px orange;
}
.radio input:checked {
color: red;
border: 10px solid #fff;
}
Current output
What I'm trying to achieve is that, when a radio button is checked, the border should be 10px wide and colour (of both the text and the border) should change. But I'm unable to target the border and the label.
Please help.
EDIT
I was trying different settings and made some changes in the HTML and css as below -
HTML - (Please note the label tag for earlier and now)
<div id="workpermit-wp_spost1" aria-required="true" aria-invalid="false">
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="Yes"><label>Yes</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="No"><label>No</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="NA"><label>NA</label></div>
</div>
CSS
.radio input[type="radio"]:checked
{
box-shadow: 0 0 0 3px orange;
}
.radio input[type="radio"]:checked + label {
color: red;
border: 10px solid #fff;
}
This combination is working. But unfortunately I cannot change the HTML manually. So the HTML I cannot change. can we anyway select the label on the earlier HTML setting.

Answer 1

You can change HTML. if you want at the end the code
<div id="workpermit-wp_spost1" aria-required="true" aria-invalid="false">
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="Yes"><label>Yes</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="No"><label>No</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="NA"><label>NA</label></div>
</div>
You can do something like this
echo $form->field($model, 'wp_spost1')->radioList(['Yes'=>'Yes','No'=>'No','NA'=>'NA'], ['item' => function($index, $label, $name, $checked, $value) {
if ($checked) {
$checkedText = 'checked="checked"';
} else {
$checkedText = '';
}
$return = '<div class="radio">';
$return .= ' <input id="workpermit-wp_spost1_' . $index . '" type="radio" name="' . $name . '" value="' . $value . '" ' . $checkedText . '>';
$return .= '<label for="workpermit-wp_spost1_' . $index . '">'. ucwords($label).' </label></div>';
return $return;
}
])->label(false);