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>

其实上面的例子就是正常的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居然变样式了

full

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

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

input { background: #FFF; }

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

分享

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

LINK: https://www.qttc.net/394-ie-checkbox-style.html

NOTE: 原创内容,转载请注明出自琼台博客