css - 替换复选框图像 [英] css - replacing checkbox image
本文介绍了css - 替换复选框图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好我知道这已经回答了,但我不能让它为我工作。
Hi I know this has been answered but I can't get it to work for me.
我有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>
,然后
.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;}
但是它并没有拿起选中的图片。我不知道什么是问题,任何人的任何想法? heres a fiddle btw
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
推荐答案
当选中复选框时,它会拾取选中的图片。
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.
将AM / PM移动到标签中,并使用填充将其移动而不是空格。
Move the AM/PM into the label and use padding to shove it over instead of the spaces.
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;
}
这篇关于css - 替换复选框图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文