联系表 7 将图像添加到每个无线电输入

Question

我正在使用 Wordpress 中的 Contact Form 7 构建一个表单，该表单有一些无线电输入。我希望在每个单选按钮附近都有一个小图像（某种显示织物纹理的标签）。有谁知道我怎样才能做到这一点？也许有一些像 ACF 这样的工作插件，它们与 CF7 或 jQuery 片段兼容，它们插入带有<img>标签的单个 html 行。

我需要这样的布局：

Answer 1

联系表单 7 的每个输入字段都有唯一的 ID 或类，您可以定位该类或 ID 以添加样式

我已经做了这个示例来展示这个过程，你的代码可能与这个不同

<input class="radio1" type="radio">

CSS：

input.radio1 {
    height: 50px;
    width: 50px;
    display: block; /* You Can remove display block, since your buttons are already stacked */
}
input.radio1:after {
    background-image: url('images/image.img');
    content: '';
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: cover;
    margin-left: 35px;
}

或者干脆你可以将背景图像应用到那个绿色框，如果你已经打算让它看起来那样。