使用自定义复选框检查项目时显示
问题描述:
我正在使用Wordpress构建一个带有自定义复选框的网站(显然它比这更多,但这正是我所关心的问题)。我可以显示自定义复选框,但无法显示何时打勾。任何人都可以协助CSS来实现这个目标吗?使用自定义复选框检查项目时显示
这里的布局和CSS我有复选框由WordPress和联系表7插件作为生成:
input[type=checkbox] {
display: none;
}
.wpcf7-list-item label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
left: 0;
position: relative;
top: 3px;
background-color: #fff;
border: 2px #3f9abb solid;
border-radius: 2px;
}
<span class="wpcf7-list-item first">
<label>
<input type="checkbox" name="community[]" value="Community Member">
<span class="wpcf7-list-item-label">Community Member</span>
</label>
</span>
我试过这个指南,但没有运气。是否有人能够协助获得勾号显示(并且在表单提交时显然仍然提交)?
答
input[type=checkbox] {
display: none;
}
.wpcf7-list-item label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
left: 0;
position: relative;
top: 3px;
background-color: #fff;
border: 2px #3f9abb solid;
border-radius: 2px;
}
input[type=checkbox]:checked + label:before {
background: blue;
}
<span class="wpcf7-list-item first">
<input id="checkbox" type="checkbox" name="community[]" value="Community Member">
<label for="checkbox">
<span class="wpcf7-list-item-label">Community Member</span>
</label>
</span>
更新 - 使用您当前的标记
input[type=checkbox] {
display: none;
}
.wpcf7-list-item label > span:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
left: 0;
position: relative;
top: 3px;
background-color: #fff;
border: 2px #3f9abb solid;
border-radius: 2px;
}
input[type=checkbox]:checked + span:before {
background: blue;
}
<span class="wpcf7-list-item first">
<label>
<input type="checkbox" name="community[]" value="Community Member">
<span class="wpcf7-list-item-label">Community Member</span>
</label>
</span>
答
那么,如果稍微更改代码,则可以使用input:checked + label
在选中时更新样式。
input[type=checkbox] {
display: none;
}
.wpcf7-list-item label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
left: 0;
position: relative;
top: 3px;
background-color: #fff;
border: 2px #3f9abb solid;
border-radius: 2px;
}
.wpcf7-list-item input:checked + label:before { background-color: red; }
<span class="wpcf7-list-item first">
<input type="checkbox" name="community[]" value="Community Member" id="foo">
<label for="foo"><span class="wpcf7-list-item-label">Community Member</span></label>
</span>
+0
由于它生成的代码,我无法改变它的顺序。除非你可以提供一个可以做到这一点的jQuery方法。 – Albert 2014-09-25 12:53:51
试试这个http://jsfiddle.net/awayF/4/ – 2014-09-25 12:51:43
这个已经被问过http://*.com/questions/21968531/how-to-draw-a-checkmark-tick- using-css – 2014-09-25 12:52:48