IE下checkbox黑框样式问题及解决方法

比如有一列checkbox，你在checkbox里勾选取消都很正常，如

<div><span>第一个</span><input type="checkbox" /></div>
<div><span>第二个</span><input type="checkbox" /></div>
<div><span>第三个</span><input type="checkbox" /></div>
<div><span>第四个</span><input type="checkbox" /></div>
<div><span>第五个</span><input type="checkbox" /></div>
<div><span>第六个</span><input type="checkbox" /></div>
<div><span>第七个</span><input type="checkbox" /></div>

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

其实上面的例子就是正常的checkbox，勾选或取消没什么不一样，但我要是加入以下JavaScript代码让它自动排位就有点问题了

window.onload = function () {
  var inputs = document.body.querySelectorAll('input');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = (function (index) {
      return function () {
        if (this.checked) {
          document.body.insertBefore(
            this.parentElement,
            inputs[0].parentElement
          );
        } else {
          document.body.appendChild(this.parentElement);
        }
      };
    })(i);
  }
};

然后你在勾选或取消时，checkbox居然变样式了

这个原因的引起估计是IE对checkbox默认有鼠标事件样式，如果你仔细分析，你会发现默认在IE中的checkbox在鼠标左键压下时checkbox背景全黑，当松开鼠标左键后checkbox的黑色背景消失。引起图中样式的问题可能是在鼠标压下时checkbox背景发生了变化，接着移位，最后鼠标松开后由于checkbox发生了移位所以不能恢复checkbox鼠标压下时的黑色背景导致。

为了解决这个问题我们可以给checkbox添加样式阻止浏览器默认样式

input { background: #FFF; }

添加背景后，仔细看还是有点灰色的底色，但相比黑色背景好的多了