时间戳

首页 > 解决方案 > 样式联系表 7 单选按钮

html - 样式联系表 7 单选按钮

问题描述

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

任何帮助都会很棒，我尝试了几种解决方案，但都没有运气。

标签： htmlcsswordpressradio-buttoncontact-form-7

解决方案

Here's what ended up working for me:

I installed "Checkator", then added this:

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

...at the top of fm.checkator.jquery.js to add the "checkator" CSS class to the radio buttons.

Manually applying the CSS class to the radio buttons allowed Checkator to find them, and from there I was able to style them as needed.

推荐阅读