自定义复选框在IE10中不起作用

Question

我需要创建一个带绿色复选标记的自定义复选框

我写了以下代码：

<input id="Text1" type="text" style="width:150px" tabindex="1" />    
    <input id="Text2" type="text" style="width:150px" tabindex="2" />
    <label class="myCheckbox" tabindex="3" contenteditable='true'>
        <input type="checkbox" name="test"/>
        <span></span>
    </label>
    <input id="Button1" type="button" value="button" style="width:150px" tabindex="4" />

和css：

.myCheckbox input {
    display: none;
}
.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: gray;           
    box-sizing:border-box;
}
.myCheckbox input:checked + span {
    background: url("http://i.stack.imgur.com/UfplA.png") no-repeat center gray;
}
.myCheckbox {
     /*outline:none;*/
     display:inline-block;   
     font-size:0;
}

.myCheckbox:focus > span {
     /*border:2px dotted green; */
}

它在谷歌浏览器中工作正常，但 IE 10 ，我无法勾选复选框

任何想法，

请在此处获取我的全部代码：http://jsfiddle.net/wfk9Y/并在 IE10中运行。

Answer 1

我已将contenteditable="true"更改为contenteditable="false"并且它适用于我（使用IE 10和IE 11进行测试）。

DEMO

<label class="myCheckbox" tabindex="3" contenteditable='false'>

修改

DEMO 2

<强> HTML

<input id="Text1" type="text" style="width:150px" tabindex="1" />

<input id="Text2" type="text" style="width:150px" tabindex="2" />

<!-- wrap your 'checkbox' in a *div* element -->
<div class="myCheckbox" tabindex="3" contenteditable='false'>
<input type="checkbox" name="test"/>
<span></span>
</div>

<input id="Button1" type="button" value="button" style="width:150px" tabindex="4" />

<强> CSS

//do not set display:none as the input won't be able to receive focus
//instead, set its opacity to 0, position it absolutely, so it's not visible but tabbable

.myCheckbox input {
    opacity:0; 
    position:absolute;
    top:0
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: gray;           
    box-sizing:border-box;
}

.myCheckbox input:checked + span {
    background: url("http://i.stack.imgur.com/UfplA.png") no-repeat center gray;
}

.myCheckbox {
    /*outline:none;*/
    display:inline-block;   
    font-size:0;
    position:relative; /*you also need to give relative positioning
                       to the parent of your input element, which will allow us to 
                       absolutely position the input*/
}

.myCheckbox:focus > span {
     /*border:2px dotted green; */
}

编辑2

添加了Javascript代码，当点击输入或按下Enter键时，它会根据input按钮的当前状态进行检查或取消选中。

FULL DEMO

<强>的Javascript

function attach(element,listener,ev,tf){

if(element.attachEvent) {

    element.attachEvent("on"+listener,ev);

}else{

    element.addEventListener(listener,ev,tf);

}

}

 function checkuncheck(){

 span = checkbox.getElementsByTagName('span')[0];

    if(checked == false){

        checked = true;

    span.style.background = "url('http://i.stack.imgur.com/UfplA.png') no-repeat center gray";

    }else{

        checked = false;

    span.style.background = "url('') no-repeat center gray";

    }

}

var checkbox = document.getElementById('customcheckbox');
var checked = false;

attach(checkbox,'keydown',function(event){

evt = event || window.event;

key = evt.which || evt.keyCode;

if(key == 13){

  checkuncheck();

 }

},false);

attach(checkbox,'click',function(event){

checkuncheck();

},false);

Answer 2

你应该做出以下改变，因为你需要做出满足的判断=＆＃34; true＆＃34; to contenteditable =＆＃34; false＆＃34;

<label class="myCheckbox" tabindex="3" contenteditable='false'>

了解更多信息： -

http://help.dottoro.com/lhwqtkhj.php

Answer 3

在Internet Explorer上使用JQuery时，输入复选框存在相同的问题
以下代码似乎可以解决该问题！

<input type="checkbox" name="test" style="opacity:1" />