php - Wordpress 联系表格 7 图像而不是单选按钮
问题描述
正如标题所暗示的,我想使用图像而不是单选按钮,以便用户可以选择图片。我知道这里有一个修改php代码的解决方案,但这似乎已经过时了。我还看到了这个https://jsfiddle.net/La8wQ/10/解决方案,如果插件以与示例中相同的方式生成 html,它会很好用。
相反,它在我的页面上看起来像这样:
<span class="wpcf7-list-item first">
<span class="wpcf7-list-item-label">::before Type 1 ::after</span>
<input type="radio" name="type-of-website" value="Type 1" checked="checked">
</span>
这适用于我添加的每种类型。我知道我可以在标签中扭曲它,但我看不出它在这种情况下会有什么帮助。我想坚持展示示例,因为它使用纯 css。
我想我的问题到底是,我怎样才能让它在我的情况下工作?
解决方案
欢迎来到堆栈溢出!
为此,您需要做一些事情。制作单选按钮,<label></label>
直接在它们下方/之后。这不是默认的 WPCF7 标签。单选按钮需要具有与其上方标签部分id=""
相同的值。for=""
A<label>
需要添加一个类(例如visa
),它的图像在 CSS 中定义,如下所示.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
:
A<label>
也需要这个类:drinkcard-cc
.
每个单选按钮都需要wpcf7-special-radio
添加类。
对于 2 个单选按钮,示例如下所示:
HTML
<form>
<div>
<span class="wpcf7-list-item first">
<input id="special_radio_1" type="radio" class="wpcf7-special-radio" name="type-of-website" value="Type 1"/>
<label for="special_radio_1" class="drinkcard-cc visa"></label>
<input id="special_radio_2" type="radio" class="wpcf7-special-radio" name="type-of-website" value="Type 2"/>
<label for="special_radio_2" class="drinkcard-cc mastercard"></label>
</span>
</div>
</form>
CSS
.wpcf7-special-radio {
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}
.wpcf7-special-radio:active +.drinkcard-cc{opacity: .9;}
.wpcf7-special-radio:checked +.drinkcard-cc{
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.drinkcard-cc{
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:100px;height:70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}
这是一个工作小提琴https://jsfiddle.net/Snuwerd/9r1dz0uk/
更新
更正,标签需要在输入之后/下方,就像在示例代码中一样。
更新
没有 JS 是不可能的,因为在 WPCF7 中不能为单选元素分配单独的 ID,所以这里是 JS 解决方案:
使用这个 CSS:
.wpcf7-special-radio-container .wpcf7-list-item-label {
display: none;
}
.wpcf7-special-radio {
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.special_radio_card_0 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_1 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_2 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_3 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_4 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_5 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.wpcf7-special-radio:active +.drinkcard-cc{opacity: .9;}
.wpcf7-special-radio:checked +.drinkcard-cc{
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.drinkcard-cc{
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:100px;height:70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}
确保不要在<script></script>
标签内添加任何白(空)行,否则它会中断,因为 WPCF7 会<p>
在代码中放置段落 ( )。将此粘贴到您的表单中:
<div class="row">
<div class="col-md-6"> <label> Your Name * [text* your-name] </label> </div>
<div class="col-md-6"> <label> Your Email * [email* your-email] </label> </div>
</div>
<label> Subject [text your-subject] </label> <label> Your Message [textarea your-message] </label>
[radio type-of-website class:wpcf7-special-radio-container default:1 "Type 1" "Type 2"]
[submit "Send"]
<script>
jQuery(document).ready(function($) {
$('.wpcf7-special-radio-container input').addClass('wpcf7-special-radio');
$('.wpcf7-special-radio').each(function (index, el) {
var label = $('<label>').attr('for', 'special_radio_'+index).addClass('drinkcard-cc').addClass('special_radio_card_'+index);
$(this).attr('id', 'special_radio_'+index);
$(this).after(label);
});
});
</script>
您可以像这样在收音机中添加新选项
2个选项:
[radio type-of-website class:wpcf7-special-radio-container default:1 "Type 1" "Type 2"]
4个选项:[radio type-of-website class:wpcf7-special-radio-container default:1 "Type 1" "Type 2" "Type 3" "Type 4"]
它们将与这些行的 CSS 代码中选择的图像按顺序映射:
.special_radio_card_0 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_1 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_2 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_3 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_4 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_5 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
推荐阅读
- mongodb - Mongo 计算未知数量的字段标签
- javascript - DataTables.Net 按钮未显示
- python - 如何使用请求下载二进制文件
- apache-kafka - Kafka Connect 将数据写入不存在的主题
- javascript - 将 JavaScript for 循环翻译成 Java 并简化
- java - Java - ASCII 转换遇到空格时 Printf 损坏
- c# - 我不想单选按钮检查更改 C# Winform
- css - 如何允许从 Firefox 中的扩展弹出窗口复制粘贴?
- android - 在其他活动中更改 TextView
- db2 - Db2 发生内存分配错误,com.ibm.db2.jcc.am.SqlException: SQLCODE=-83, DRIVER=3.65.77