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

Answer 2

你有input和[type="checkbox"]之间的空格......这就是复选框仍在显示的原因。删除它，你是金色的

Answer 3

问题是您要将input[type=checkbox]分开以使其成为input [type=checkbox]。 CSS将此解释为[type=checkbox]内<{1}}内<input> 内的任何.amPmCheckbox 。

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

使用CSS样式时复选框

3 个答案: