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

HTML/CSS 2013-12-22 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>

DEMO走起!

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

JS Code:

window.onload = function(){
	var inputs = document.body.getElementsByTagName("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居然变样式了:

DEMO走起!

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

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

input { background: #FFF; } 

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

文字链接:《IE下checkbox黑框样式问题及解决方法

文章地址:http://www.qttc.net/201312394.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1