嗨,我知道这已经得到了解答,但我无法让它为我工作.
我有HTML
然后
.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;}
但它没有拿起检查过的图像.我无法弄清楚问题出在哪里,任何人有什么想法?这是一个小提琴
http://jsfiddle.net/ksCk8/
选中复选框后,它会选中已检查的图像.你遇到的问题是没有任何东西可以点击以勾选复选框.
将AM/PM移动到标签中并使用填充将其推过而不是空格.
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:
.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; }
http://jsfiddle.net/JkDhN/1/