Question

我是编码的业余爱好者，但我想通过CSS设置无线电按钮的样式。我已经设法禁用输入字段并将bg-image添加到标签中。

但是，我不知道如何定位已检查的标签......如果选中它们，我希望它们的不透明度为1。

IsDefault="True"

这是我的CSS：

  <label for="edd-gateway-manual" 
    class="edd-gateway-option edd-gateway-option-selected" 
    id="edd-gateway-option-manual">
    <input type="radio" 
    name="payment-mode" 
    class="edd-gateway" 
    id="edd-gateway-manual" 
    value="manual">Test-Zahlung</label>

    <label for="edd-gateway-paypal" 
    class="edd-gateway-option" 
    id="edd-gateway-option-paypal">
    <input type="radio" 
    name="payment-mode" 
    class="edd-gateway" 
    id="edd-gateway-paypal" 
    value="paypal">PayPal</label>

这是我的代码：https://jsfiddle.net/01k77o5z/

你可以帮帮我吗？那太好了！

P.S。由于更新，我不得更改HTML代码......

Answer 1

要使用CSS执行此操作，最简单的方法是重新组织HTML：

<input type="radio" id="edd-gateway-manual" ... />
<label for="edd-gateway-manual" ... >Test-Zahlung</label>

这样你可以使用CSS选择器来定位它们：

[type="radio"]:checked + label {
   ...
}

由于您声明无法更改HTML代码，下一个最简单的解决方案是使用JavaScript切换标签上的类（注意：此示例使用jQuery）：

$('[type="radio"]').click(function() {
    $(this).parents('label').toggleClass('checked');
});

label.checked {
    ...
}

但是，如果确实希望找到一种方法来实现此功能，那么您可以使用:before或:after伪类。选中元素而不是使用父标签（因为父选项不能在CSS选择器中定位）。像这样：

[type="radio"]:before {
  content: '';
  ...
}

[type="radio"]:checked:before {
  content: '';
  ...
}

Answer 2

仅CSS解决方案：

这是由伪元素:checked完成的。如果您真的需要倒退，请参阅the support了解此元素。

input[type=radio]:checked + label {
  /* Add your style here */
}

如何锁定已检查的单选按钮（CSS）

2 个答案: