设置联系表单7单选按钮的样式

Question

我正在尝试设置由Contact Form 7插件为WordPress生成的单选按钮的样式。我所看到的所有示例都依赖于这样的标签，标签上带有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

您是否尝试过将类添加到类似于以下内容的单选按钮之一：

   <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是很棒的资源。

-罗伯特

Answer 2

您可以使用此插件，它易于使用，并且可以为您的联系方式https://wordpress.org/plugins/material-design-for-contact-form-7/

提供新颖的风格

Answer 3

以下是对我有用的东西：

我安装了“ Checkator”，然后添加了此内容：

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

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

通过手动将CSS类应用于单选按钮，Checkator可以找到它们，然后我就可以根据需要对它们进行样式设置。