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');
}

非常感谢！

- awongCM

Answer 1

CSS没有问题。你的问题在于要将元素与元素相匹配。

这种方法依赖于被点击时切换复选框的事实。如果没有连接到复选框，它就不起作用。将每个元素的for属性的值与每个复选框的id匹配。

例如:

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

点击此处查看实际示例

- Josh Crozier

---

哇，回复好快！我刚刚解决了它 - 哈！这就解释了为什么我应该使标签元素和输入元素匹配。我忽略了那一部分，从没有意识到这是我应该首先使用的东西。谢谢大家！ :) - awongCM

我遇到了这个问题，但这不是原因，我有一种感觉是因为我在客户端使用handlebars生成包含复选框的模板。这只发生在较小的屏幕尺寸上，在较大的尺寸上，它不使用客户端模板时可以正常工作。感激任何见解... - RyanJohnstone

Answer 2

您的HTML中的元素在其属性中具有错误的值。 每个必须具有与其要激活的复选框的完全匹配的属性值。

- Scott Leis

Answer 3

你的标签需要有一个for属性，其值应该与对应输入框的id属性相同。以下是一个可行的示例：

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

- Neil Palmer

Answer 4

尝试使用这段代码

<label>                        
   <input type="checkbox" class="input-checkbox" id="checkbox1" />
   <span class="input-label">Your Label</span>
</label>

- Jigar Prajapati

Answer 5

你需要更改标签的ID，这里是可工作的代码示例。我已经更改了你的这一行。

<label for="checkbox2" class="input-label"></label>

http://jsfiddle.net/jUa3P/146/

- jitendra varshney