如何用内联CSS结合PHP变量设置自定义图片单选按钮选中边框颜色

问题背景 #

我通过PHP生成带单选按钮的表单，用CSS隐藏原生单选按钮、替换为自定义图片，选中时给图片添加outline边框。现在需要通过PHP变量$border_col动态修改这个outline的颜色，尝试内联样式无法关联checked状态的图片，改用CSS变量后选中图片边框仍显示默认红色，未达到预期效果。

问题原因 #

之前把CSS变量定义在<input>元素上，但.img_radio:checked + img是选中input的同级img元素——CSS变量仅在定义它的元素及其子元素中生效，img作为input的同级元素无法获取input上的变量，因此触发了CSS变量的默认值red。

解决方案 #

将CSS变量定义在input和img的共同父元素<label>上，让子元素input和img都能继承并使用该变量。

修改后的代码 #

PHP代码

$border_col = '#006400';
echo '
<label style="--img_radio-outline_color: ' . $border_col . ';">
   <input 
      type="radio" 
      name="ava_select" 
      value="' . $ava_row["ID"] . '" 
      class="img_radio" 
      ';
      if ($row["avatar"]==$ava_row["ID"]) {
         echo ' checked="checked" ';    
      }
      echo '
   >
   <img 
      src="img/profile/' . $ava_row["img"] . '" 
      alt="Avatar" 
      class="img-fluid rounded"
   >
</label> 
';

CSS代码

/* 隐藏原生单选按钮 */
.img_radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义图片样式 */
.img_radio + img {
  cursor: pointer;
}

/* 选中状态样式 */
.img_radio:checked + img {
  outline-color: var(--img_radio-outline_color, red);
  outline-style: var(--img_radio-outline_style, solid);
  outline-width: var(--img_radio-outline_width, 4px);
}

说明 #

变量定义在<label>父元素后，input和img作为子元素可继承该变量，.img_radio:checked + img就能正确读取--img_radio-outline_color的值，实现通过PHP变量动态修改选中图片边框颜色的效果。若需调整边框宽度或样式，直接在<label>的style属性中添加对应变量即可（如--img_radio-outline_width: 5px;）。

内容的提问来源于stack exchange，提问作者SlickRed