联系表格 7 - 复选框自定义/风格化答案

【问题标题】：Contact Form 7 - Checkbox customization / stylization联系表格 7 - 复选框自定义/风格化
【发布时间】：2016-01-05 22:14:45
【问题描述】：

我正在我的网站上工作：http://cleaners.se/home/#kontakt

我有一个问题，我想设置复选框的样式，使其看起来与其他表单相同。我希望复选框是独占的，因此您只能选择一个复选框。将它们放在一起也是正确的方法吗？或者有什么更好的方法吗？

我已经这样做了：

.knapp + label {
}

label {
	display: inline;
}

.knapp {
	display: none;
}

.knapp + label {
	background-color: #2CACA9;
	border: 0;
	border-radius: 0;
	height: 50px;
	width: 50px;
	top: 3px;
	display: inline-block;
	position: relative;
	margin-left: 10px;
}

.knapp + label:active, .knapp:checked + label:active {
}

.knapp:checked + label {
	background-color: #2CACA9;
	border: 0;
	color: #FFFFFF;
}

.knapp:checked + label:after {
	content: '\2716';
	font-size: 25px;
	font-family: "montserrat";
	position: absolute;
	top: 3px;
	left: 15px;
	color: #FFFFFF;
}

<div>
<input type="checkbox" id="telefon" class="knapp" /><label for="telefon"></label><input type="checkbox" id="e-post" class="knapp" /><label for="e-post"></label>
</div>

【问题讨论】：

标签： html css wordpress contact-form-7

【解决方案1】：

如果您希望用户一次只选择一个复选框。

然后你想使用无线电输入

<input type="radio" name="radio_button" /> Yes
<br />
<input type="radio" name="radio_button" /> No

【讨论】：

感谢您的回复，但是当我使用 Contact Form 7 插件中的“标准”框时，框还有一个“独占”选项。盒子有专属标签/代码吗？
抱歉，我不确定我是否理解您所说的“标准”和“独家”是什么意思？您在使用 Contact From 7 Wordpress 插件吗？在表单部分，您可以选择任何您喜欢的 HTML / class' / id
如果你查看我网站的链接，你就会明白我的意思 :-) 该网站上有两种复选框，一种是已经定制的，另一种是由联系表 7 原创的. 如果你明白，请告诉我。

【解决方案2】：

好的，我已经为此工作了一段时间。我发现它可能需要添加 JavaScript，是的，它适用于 jQuery 1.7，我现在的问题是对于在 javascript 上比我更好的人......有没有办法让这个脚本更好？请记住，我认为它仅适用于 jQuery 1.7..

<script>
    $('div .knapp').click(function() {
        checkedState = $(this).attr('checked');
        $(this).parent('div').children('.knapp:checked').each(function() {
            $(this).attr('checked', false);
        });
        $(this).attr('checked', checkedState);
    });
</script>

【讨论】：