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

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

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

}

在 Codepen 上测试并有效。只需将其用作模板并相应地填充您的数据。只是style在我测试时使用了一些使其可见。