联系表格7 - 复选框定制/程式化

我的工作在我的网站：http://cleaners.se/home/#kontakt 联系表格7 - 复选框定制/程式化

我有一个问题，我想样式的复选框看起来是一样的其他形式。我希望复选框是排他性的，所以您只能选择一个复选框。这是否也是正确的方式把它们放在一起？或者有没有更好的方法来做到这一点？

我已经做到了这一点：

.knapp + label { 
 
} 
 

 
label { 
 
\t display: inline; 
 
} 
 

 
.knapp { 
 
\t display: none; 
 
} 
 

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

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

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

 
.knapp:checked + label:after { 
 
\t content: '\2716'; 
 
\t font-size: 25px; 
 
\t font-family: "montserrat"; 
 
\t position: absolute; 
 
\t top: 3px; 
 
\t left: 15px; 
 
\t 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>

来源

2015-10-08 David Jurkiewicz

如果你希望用户只一次选择的复选框之一。

然后你想使用无线输入

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

来源

2015-10-08 10:52:54 Zack1101

感谢您的答复，但是当我使用的联系表格7插件的“标准”框，还有一个“独家”选项为箱子。有没有专门的标签/代码框？ –

对不起，我不确定我是否理解“标准”和“专属”的含义？您是否使用7 Wordpress插件的联系人？在表单部分中，您可以使用任何HTML/class'/ id的 – Zack1101

如果您查看我网站的链接，您将理解我的意思:-)该网站上有两种复选框，自定义，并通过联系表单创建一个。7.如果您了解，请告诉我。 –

好吧，我一直工作在这一段时间了。我发现它可能需要添加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>

来源

2015-10-08 12:42:36

联系表格7 - 复选框定制/程式化

回答

相关问题