Html 选中时的 CSS 样式复选框 - 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21271712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS styling checkbox when checked - not working
提问by awongCM
I have the following static html file, where I'm spending time building a CMS web application site for our client.
我有以下静态 html 文件，我正在花时间为我们的客户构建一个 CMS Web 应用程序站点。
http://cms.tmadev.com.au/usergroup.html
http://cms.tmadev.com.au/usergroup.html
In middle section, there's a vertical array of checkboxes (which I css-styled it) and I followed numerous online tutorials, which lead me to use this site link.
在中间部分，有一个垂直排列的复选框（我对其进行了 css 样式），并且我遵循了许多在线教程，这使我使用了此站点链接。
I download the source code tutorial, understood it, copied the css code, tailor my changes as per my client requirements.
我下载了源代码教程，理解了它，复制了 css 代码，根据我的客户要求定制了我的更改。
Everything looks perfectly fine - except when trying to check the checkbox.
一切看起来都很好 - 除非尝试选中复选框。
NOTHING HAPPENS!
没发生什么事！
The checkbox doesn't get checked when clicked!
单击时不会选中该复选框！
I couldn't figure out why it's not working as it's supposed to be like the tutorial.
我无法弄清楚为什么它不工作，因为它应该像教程一样。
Can someone please tell me what I did wrong?
有人可以告诉我我做错了什么吗？
Here's my code.
这是我的代码。
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');
}
Thanks very much!
非常感谢！
回答by Josh Crozier
The CSS is fine. Your problem is matching the labelelements with the inputelements.
CSS 没问题。您的问题是将label元素与input元素匹配。
This method relies on the fact that clicking the labeltoggles the checkbox. If the labelisn't attatched to the checkbox it won't work. Match the value of each label's forattribute to the idof each checkbox.
此方法依赖于单击label切换复选框的事实。如果label未附加到复选框，它将不起作用。将 eachlabel的for属性值id与每个复选框的匹配。
For example:
例如：
<input type="checkbox" class="input-checkbox" id="checkbox1">
<label for="checkbox1" class="input-label"></label>
回答by Scott Leis
The labelelements in your HTML have the wrong value in their forattributes.
Each labelmust have a forattribute value exactly matching the idof the checkbox it is meant to activate.
labelHTML 中的元素的for属性值不正确。
每个都label必须有一个for与id要激活的复选框完全匹配的属性值。
回答by Neil Palmer
The for attribute on your label needs to match the id of your input. This is working for me:
标签上的 for 属性需要与输入的 id 匹配。这对我有用：
<div class="inputfield">
<input type="checkbox" class="input-checkbox" id="checkbox1">
<label for="checkbox1" class="input-label"></label>
</div>
回答by Jigar Prajapati
Try this code
试试这个代码
<label>
<input type="checkbox" class="input-checkbox" id="checkbox1" />
<span class="input-label">Your Label</span>
</label>
回答by jitendra varshney
you have to change your label for id here is working fiddle i have change your this line
你必须改变你的 id 标签，这里正在工作，我已经改变了你的这条线
<label for="checkbox2" class="input-label"></label>
