如何在选定的无线电类型输入上设置背景色

Question

我正试图通过在网上搜索来找出如何在iPay88支付选项上突出显示选定或单击的选项。

这是一个场景：我有两个支付选项，银行转账和ipay88网关。选择时银行转账没有问题。如果我选择ipay88网关，另一种支付方式将出现，如通过贝宝和另一种是Gcash。如果您选择了一个，则不会发生任何事情(在您进行结账之前，它不会显示您选择的任何内容(，因此用户不知道他/她在iPay88下选择了什么支付方式。

为了解决这个问题，我希望它被突出显示，或者让用户看到他/她在ipay88下选择或点击的支付方式。

让我分享以下代码：

echo '<div class="ipay88_ph_gateway ipay88_opt_container" >';
foreach ( $this->paymenttype_available_ph as $number ) {
echo '<p  style="margin-bottom:5px;">';
echo '<input type="radio" id="ipay88'.$this->types_mapping_ph['id'][ $number ].'"';
echo 'name="ipay88_payment_type" value="'.$number.'">';
echo '<label for="ipay88'.$this->types_mapping_ph['id'][ $number ].'">';
echo '<img alt="'.$this->paymenttype_options_ph[ $number ].'" src="'. WC_Compat_iPay88::force_https( WC_iPay88::plugin_url() ) .'/assets/images/'.$this->types_mapping_ph['image'][ $number ].'.'.$this->image_ext .'">';
echo '</label>';
echo '</p>';
}
echo '</div>';

屏幕截图：付款方式ipay88

Answer 1

您需要使用CSS来更改表单元素的样式，CSS规则是：

input[type="radio"]:checked

然后你可以使用CSS来获得你想要的结果，比如这样的：

input[type="radio"]:checked {
background-color: #bbb;
}