样式联系人表单7单选按钮

Question

我正在尝试为WordPress的Contact Form 7插件生成的单选按钮设置样式。我看到的所有例子都依赖于一个带有for=""参数的标签，如下所示：

<input type="radio" id="this-button" name="test-button">
<label for="this-button">Click Me</label>

但是CF7生成的按钮不允许添加for=""参数。页面上看起来是这样的：

<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" id="yes" name="yes-button" value="Yes">
</label>

我仍然需要自定义单选按钮，但有没有其他不依赖于for=""参数的方法？jQuery已经加载到页面上，所以我可以使用jQuery解决方案。

任何帮助都会很好，我已经尝试了几种解决方案，但都没有成功。

Answer 1

以下是最终对我有效的方法：

我安装了"Checkator"，然后添加了这个：

//Add "checkator" class
$( document ).ready(function() {
$(".my-page label > input").addClass("checkator");
});

在fm.checkator.jquery.js的顶部，将"checkator"CSS类添加到单选按钮中。

手动将CSS类应用于单选按钮可以让Checkator找到它们，从那里我可以根据需要对它们进行样式设置。

Answer 2

您是否尝试将一个类添加到类似于的单选按钮中

<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>

你应该能够添加自定义类，甚至通过wordpress或获得一个CSS插件，让你添加自定义CSS。

https://www.w3schools.com/howto/howto_css_custom_checkbox.asp是一种巨大的资源。

-Robert