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

Question

我正在尝试使用来自 MySQL 的数据填充单选按钮。

我希望选定的单选按钮改变颜色，并在页面加载时选择第一个元素。

我怎样才能做到这一点？

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

}

此 CSS 不会在选择时更改单选按钮的颜色，也不会在加载时选择单选按钮。

Answer 1

这应该对你有用。但是您必须注意它为 thelabel而不是 着色radio，我认为这就是您想要实现的目标。HTML：<div class="panel">&nbsp; <input type="radio"&nbsp; name="radios" /><label>R1</label> //label for first Radio&nbsp; <input type="radio" name="radios" /><label>R2</label> //Label for second radio</div>CSS：.panel input[type="radio"]:checked + label{&nbsp; background-color: yellow;&nbsp; width: 10px;&nbsp; height: 10px;&nbsp; display: inline-block;}在 Codepen 上测试并有效。只需将其用作模板并相应地填充您的数据。只是style在我测试时使用了一些使其可见。