使用自定义复选框检查项目时显示

我正在使用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"> 
 
      &nbsp; 
 
      <span class="wpcf7-list-item-label">Community Member</span> 
 
</label> 
 
</span>

我试过这个指南，但没有运气。是否有人能够协助获得勾号显示（并且在表单提交时显然仍然提交）？

来源

2014-09-25 Albert

试试这个http://jsfiddle.net/awayF/4/ – 2014-09-25 12:51:43

这个已经被问过http://stackoverflow.com/questions/21968531/how-to-draw-a-checkmark-tick- using-css – 2014-09-25 12:52:48

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>

来源

2014-09-25 12:49:21 Turnip

由于它是生成的代码，我无法改变它的顺序。除非你可以提供一个可以做到这一点的jQuery方法。 – Albert 2014-09-25 12:52:19

确定查看更新 – Turnip 2014-09-25 12:56:00

完美！非常感谢。现在尝试和测试它，如果它能100％工作，将会接受:) – Albert 2014-09-25 12:58:10

那么，如果稍微更改代码，则可以使用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>

来源

2014-09-25 12:47:31 epascarello

由于它生成的代码，我无法改变它的顺序。除非你可以提供一个可以做到这一点的jQuery方法。 – Albert 2014-09-25 12:53:51

使用自定义复选框检查项目时显示

回答

相关问题