我需要一些有关自定义 Javascript 的帮助。
我正在尝试在 WooCommerce 结帐页面中设置付款方式选择的样式:
我希望能够分别设置付款方式的未选中、选中和悬停状态的样式。
我能够使用 CSS 为付款方式的常规和悬停状态设置样式。
但是,由于已选中和未选中的 CSS 类之间没有区别,因此无法单独设置付款方式的选中状态的样式。根据 WooCommerce 插件支持,这需要自定义 Javascript 来帮助识别选中状态。
自定义 Javascript 应该是什么样的?
答案 0 :(得分:3)
没有你的 html,你可以很容易地用 css 做到这一点:
这是一个例子:
input:checked + label {
font-weight: bold;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + *::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 1rem;
height: 1rem;
margin-right: 0.3rem;
border-radius: 50%;
border-style: solid;
border-width: 0.1rem;
border-color: gray;
}
input[type="radio"]:checked + *::before {
background: radial-gradient(teal 0%, teal 40%, transparent 50%, transparent);
border-color: teal;
}
input[type="radio"]:checked + * {
color: teal;
}
<fieldset>
<legend>Theme color:</legend>
<p>
<input type="radio" name="color" id="red" value="#F00">
<label for="red">Red</label>
</p>
<p>
<input type="radio" name="color" id="green" value="#0F0">
<label for="green">Green</label>
</p>
<p>
<input type="radio" name="color" id="blue" value="#00F">
<label for="blue">Blue</label>
</p>
</fieldset>
对于您的示例,您必须设置 important
以覆盖 woocomerce 设置
信用卡的示例 css:
#payment_method_stripe:checked + label {
font-weight: bolder !important;
font-size: larger !important;
color: yellow !important;
}
你用 paypal id payment_method_paypal