css - 在 yii2 中更改 radiolist 的 css

Question

我在 yii2 中有一些广播列表如下 -

<?php 
echo $form->field($model, 'wp_spost1')->radioList(['Yes'=>'Yes','No'=>'No','NA'=>'NA'])->label(false);
?>

它分解为以下 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>

我尝试使用的 css 如下 -

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

当前输出

我想要实现的是，当一个单选按钮被选中时，边框应该是 10px 宽并且颜色(文本和边框)应该改变。但我无法定位边框和标签。

请帮忙。

编辑

我正在尝试不同的设置，并对 HTML 和 css 进行了一些更改，如下所示 -HTML - (请注意之前和现在的label标签)

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

这个组合很有效。但不幸的是我不能手动更改 HTML。所以我无法更改 HTML。我们可以选择早期 HTML 设置中的标签吗？

Answer 1

您可以更改 HTML。如果你想要最后的代码

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

你可以这样做

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