使用CSS样式时复制复选框

我想用我自己的图像来设置我的复选框样式，但我的工作原理是，原始复选框仍然可见。所以标准复选框在自定义复选框旁边，并且链接在一起。使用CSS样式时复制复选框

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/

来源

2014-02-10 user2336624

你已经有了一个空间，input和[type="checkbox"]之间......这就是为什么该复选框仍呈现。删除它，你是黄金

来源

2014-02-10 22:20:22 80PoundsOfFury

你在你的CSS类“输入[”有一个额外的空间，消除了空间的作品。另外，要小心使用display：元素上没有隐藏它。如果输入元素被隐藏，某些浏览器不会更改已检查的输入元素的状态。相反，请在保留所有浏览器中的更改事件的同时使用以下内容隐藏它。

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

来源

2014-02-10 22:19:40 Joel

的问题是，你是为了使其input [type=checkbox]分离input[type=checkbox]。 CSS解释为[type=checkbox]内任何<input>是在.amPmCheckbox内。

新小提琴：http://jsfiddle.net/EUkK4/1/

来源

2014-02-10 22:19:47 Anonymous

使用CSS样式时复制复选框

回答

相关问题