html - 选中时的 CSS 样式复选框 - 不起作用

Question

我有以下静态 html 文件，我在其中花时间为我们的客户构建 CMS 网络应用程序站点。

http://cms.tmadev.com.au/usergroup.html

在中间部分，有一个垂直排列的复选框(我将其设置为 css 样式)并且我遵循了许多在线教程，这些教程引导我使用此站点链接。

http://csscheckbox.com/

我下载了源代码教程，理解了它，复制了 css 代码，根据我的客户要求定制我的更改。

一切看起来都很好 - 除了尝试选中复选框时。

什么都没有发生!

复选框在点击时不会被选中!

我无法弄清楚为什么它不能正常工作，因为它应该像教程一样。

有人可以告诉我我做错了什么吗？

这是我的代码。

input[type=checkbox].input-checkbox{
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: -1px;
    padding: 0;
    border: 0;
}


input[type=checkbox].input-checkbox + label.input-label{
    border: 2px solid #58585A;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 15px;
    background-repeat: no-repeat;
    font-size:15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].input-checkbox:checked + label.input-label{
    background-position: 0 -20px;   
}

.input-label{
    background-image: url('/images/tickbox.png');
}

非常感谢!

Answer 1

CSS 很好。您的问题是将 label 元素与 input 元素匹配。

此方法依赖于单击 label 切换复选框这一事实。如果 label 没有附加到复选框，它将不起作用。将每个 label 的 for 属性的值与每个复选框的 id 相匹配。

例如:

<input type="checkbox" class="input-checkbox" id="checkbox1">
<label for="checkbox1" class="input-label"></label>

LIVE EXAMPLE HERE