html - 使用 CSS 设置样式时重复复选框

Question

我正在尝试使用我自己的图像来设置我的复选框的样式，我让它工作但是，原始复选框仍然可见。因此，标准复选框位于自定义复选框旁边，并且链接在一起。

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;
 }

这是工作示例。

http://jsfiddle.net/EUkK4/

Answer 1

你的 css 类“input [”中有一个额外的空间，删除空间有效。另外，请注意在您的元素上使用 display: none 来隐藏它。如果以这种方式隐藏，某些浏览器不会更改输入元素的选中状态。相反，使用以下代码隐藏它，同时在所有浏览器中维护更改事件。

.amPmCheckbox input[type="checkbox"] {
    position: absolute;
    clip: rect(1px,1px,1px,1px);
}