样式联系表 7 单选按钮

Posted 2023-03-05

【中文标题】样式联系表 7 单选按钮

【英文标题】：Styling Contact Form 7 Radio Buttons

【发布时间】：2019-03-31 14:46:51

【问题描述】：

我正在尝试为 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 解决方案。

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

【参考方案1】：

这就是最终对我有用的东西：

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

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

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

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

【参考方案2】：

你可以使用这个插件，它很容易使用，你可以给你的联系表https://wordpress.org/plugins/material-design-for-contact-form-7/一个清新的风格

【讨论】：

我无法让该插件与我的设置一起使用。我只需要样式的单选按钮，没有别的。当我尝试使用该插件时，它弄乱了整个页面，我不得不回滚我的数据库来修复它。

【参考方案3】：

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

   <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 是一个很好的资源。

-罗伯特

【讨论】：

我实际上已经尝试过该教程。如果我不修改 CF7 插件代码，该方法将无法工作。

您是否有要修改的网站/页面的链接？

不，我不知道，它目前只是本地的。如果有帮助，我可以复制代码的 sn-ps。