Html css - 替换复选框图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20909486/
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 - replacing checkbox image
提问by Patrick Guinness
Hi I know this has been answered but I can't get it to work for me.
嗨，我知道这已得到解答，但我无法让它为我工作。
I have as HTML
我有作为 HTML
<input type="hidden" name="data[Child][remember_me]" id="am_2_" value="0"/>
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1"/>
<label for="am_2"> </label>
and then
进而
.amPmCheckbox input[type="checkbox"]{
display: none;}
.amPmCheckbox input[type="checkbox"]+label{
background: url('http://renegadeox.com/img/off.png') no-repeat; width:16px; height:17px;}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png');width:16px; height:17px;}
But it's not picking up the checked image. I can't figure out what's the problem, anyone any ideas? heres a fiddle btw
但它没有拾取选中的图像。我无法弄清楚是什么问题，有人有任何想法吗？顺便说一句，这是小提琴
回答by epascarello
It picks up the checked image when the checkbox is checked. Issue you have is the fact nothing is clickable to make the checkbox checked.
当复选框被选中时，它会拾取选中的图像。您遇到的问题是没有任何东西可以单击以选中复选框。
Move the AM/PM into the label and use padding to shove it over instead of the spaces.
将 AM/PM 移动到标签中并使用填充将其推到而不是空格上。
HTML:
HTML：
<div class="amPmCheckbox">
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
<label for="am_2">AM</label>
</div>
CSS:
CSS：
.amPmCheckbox input[type="checkbox"] {
display: none;
}
.amPmCheckbox input[type="checkbox"]+label {
background: url('http://renegadeox.com/img/off.png') no-repeat;
height:17px;
padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png') no-repeat;
height:17px;
}
