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

Question

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.

Answer 1

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>