我正在尝试使用我自己的图像来设置我的复选框的样式,我让它工作但是,原始复选框仍然可见。因此,标准复选框位于自定义复选框旁边,并且链接在一起。
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>
CSS
/*CHECBOX STYLING*/
.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 类“input [”中有一个额外的空间,删除空间有效。另外,请注意在您的元素上使用 display: none 来隐藏它。如果以这种方式隐藏,某些浏览器不会更改输入元素的选中状态。相反,使用以下代码隐藏它,同时在所有浏览器中维护更改事件。
.amPmCheckbox input[type="checkbox"] {
position: absolute;
clip: rect(1px,1px,1px,1px);
}
关于html - 使用 CSS 设置样式时重复复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21689053/