更改单选按钮颜色并选择加载时的第一个元素

I'm trying to populate radio buttons with data from MySQL.

I'd like the selected radio button to change colour, and the first element to be selected on page load.

How can I do this?

<div class="panel bg-product">
  <?php
    $stmt = mysqli_prepare($link, "SELECT id, name, price FROM products");
    $stmt->execute();
    $stmt->bind_result($prod_id, $prod_name, $prod_price);
    while($stmt->fetch()) {
      echo '<label><input type="radio" name="config-prod" value="'.$prod_id.'"> ' .$prod_name.'</label><br>';
    }
    $stmt->close();
  ?>
</div>

CSS:

.panel input[type="radio"]:checked + label{
  font-weight: 700;
  color: red;
  transition: color 0.5s ease;
}

This CSS does not change the colour of the radio button when selected, nor is a radio button selected on load.

This is your new CSS:

.input-list {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.input-list li input:checked{
  content: "";
      -webkit-appearance: push-button;
    width: 12px;
    border-radius: 13px;
    height: 12px;
    background: red;
}

.input-list li input:checked + label {
  color: red;
}

New JS code:

document.querySelector("#radio li input").checked = true;

And Your new PHP:

    <ul id="radio" class="input-list">
  <?php
    $stmt = mysqli_prepare($link, "SELECT id, name, price FROM products");
    $stmt->execute();
    $stmt->bind_result($prod_id, $prod_name, $prod_price);
    while($stmt->fetch()) {
      echo '<li>
              <input id="'.$prod_id.'" name="config-prod" value="'.$prod_id.'" type="radio">
              <label class="sub-label" for="'.$prod_id.'">'.$prod_name.'</label>
            </li>';
    }
    $stmt->close();
  ?>
</ul>

And that's how it will look:

document.querySelector("#radio li input").checked = true;

.input-list {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.input-list li input:checked {
  content: "";
      -webkit-appearance: push-button;
    width: 12px;
    border-radius: 13px;
    height: 12px;
    background: red;
}

.input-list li input:checked + label {
  color: red;
}

<ul id="radio" class="input-list">
  <li>
    <input id="first" name="radio" value="first" type="radio">
    <label class="sub-label" for="first">first</label>
  </li>
  <li>
    <input id="second" name="radio" value="second" type="radio">
    <label class="sub-label" for="second">second</label>
  </li>
</ul>

</div>

This should do the trick for you. But you must note that it colors the label and not the radio, I think this is what you were trying to achieve.

HTML:

<div class="panel">
  <input type="radio"  name="radios" /><label>R1</label> //label for first Radio
  <input type="radio" name="radios" /><label>R2</label> //Label for second radio
</div>

CSS:

.panel input[type="radio"]:checked + label{
  background-color: yellow;
  width: 10px;
  height: 10px;
  display: inline-block;
}

Tested on Codepen and works. Just use this as a template and populate your data accordingly. Just used some style to make it visible as I test.