造型联系表格 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

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

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

您甚至应该能够通过 wordpress 添加自定义 classes 或获取 CSS 插件来添加自定义 CSS.

-罗伯特

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 class 添加到单选按钮。

手动将 CSS class 应用到单选按钮允许 Checkator 找到它们，然后我可以根据需要设置它们的样式。

Styling Contact Form 7 Radio Buttons