How can I inline CSS Style the border of a radio button that has a custom image applied

Issue

I have a php file with a radio form input. I am using css to replace the radio button with a custom image, and put a border around the custom image, if the radio button is 'checked' (see /* CHECKED STYLES */ in css below).

php:

$border_col = '#006400;';
echo '
<label>
   <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:

/* for replacing radio inputs on forms to images */
/* HIDE RADIO */
.img_radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.img_radio + img {
  cursor: pointer;
}

/* CHECKED STYLES */
.img_radio:checked + img {
  outline: 4px solid #006400;
}

I would like to change the color of the outline applied by css (currently #006400;) using a php variable ($border_col). I would therefore like to use inline css to apply the styling for '.img_radio:checked + img', so that I can swap out the line color dynamically, but I haven't been able to figure out how to do this.

I'm somewhat familiar with inline styling for simpler use-cases, however I have tried multiple variations without success. The problem seems to be referencing the state of the radio button (i.e. checked + img) inline.

As per the advice provided by Chris Haas in comments, I tried to implement some CSS variables as follows:

css:

/* CHECKED STYLES */
.img_radio:checked + img {
  /*outline: 4px solid #006400;*/
  outline-color: var(--img_radio-outline_color, red);
  outline-style: var(--img_radio-outline_style, solid);
  outline-width: var(--img_radio-outline_width, 4px);
}


html:

<label>
    <input 
        type="radio" 
        name="ava_select" 
        value="10" 
        class="img_radio" 
        style="
            --img_radio-outline_color: blue;
            --img_radio-outline_width: 4px;
            --img_radio-outline_style: solid;
        "
        checked="checked"
    >
    <img 
        src="img/profile/f10.png" 
        alt="Avatar" 
        class="img-fluid rounded"
    >
</label>

I was hoping this would result in a blue solid line, however the border on the 'checked' image is remaining red.

Solution

Here's a quick demo of CSS custom properties. You use the var() function with a property name and an optional default value, just in case nothing is set, which I'd strongly recommend using for debugging purposes. You can then set that property over and over again and it will apply to the local scope, which in this case is that specific instance of that div.

<style>
    .something {
        width: 100px;
        aspect-ratio: 1 / 1;
        background-color: var(--something-bg-color, red);
        display: grid;
        place-content: center;
    }
</style>
<div class="something">
    default
</div>
<?php foreach (['purple', 'blue', 'yellow'] as $color): ?>
    <div class="something" style="--something-bg-color: <?php echo $color; ?>">
        <?php echo $color; ?>
    </div>
<?php endforeach; ?>

Which produces:

Edit

Using your code, and moving it to the label it would look like this:

<label
        style="
            --img_radio-outline_color: blue;
            --img_radio-outline_width: 4px;
            --img_radio-outline_style: solid;
        "
>
    <input 
        type="radio" 
        name="ava_select" 
        value="10" 
        class="img_radio"
        checked="checked"
    >
    <img 
        src="img/profile/f10.png" 
        alt="Avatar" 
        class="img-fluid rounded"
    >
</label>

Answered By - Chris Haas