[练习]自定义checkbox效果兼容ie ff opera

最新推荐文章于 2025-12-05 17:38:06 发布

原创最新推荐文章于 2025-12-05 17:38:06 发布 · 886 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #opera #safari #firefox #blog #chrome

本文介绍了一种利用HTML和CSS实现复选框美观展示的方法，通过隐藏原生输入元素并使用背景图片模拟选中状态，同时保持了良好的交互体验。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="keywords" content="关键字描述" />
<meta name="description" content="站点描述" />
<meta name="author" content="顾振宇,zy.e@163.com" />
<meta name="copyright" content="版权所有" />
<link rel="shortcut icon" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" />
<title></title>
<mce:style type="text/css"><!--
*{margin:0;padding:0;}
img{border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
.br{ word-break: break-all; word-wrap: break-word;}	/*在IE中实行强制换行*/
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:underline; }

.selbox label{ margin: 10px; display: block; position: relative; background: url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/pcduron/EntryImages/20090812/checkbox.gif) 0 1px no-repeat; height: 14px; float: left; overflow: hidden; line-height: 14px;}
.labelbgup{  background: url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/pcduron/EntryImages/20090812/checkbox.gif) 0 -12px no-repeat!important; }
.selbox label input{margin-right: 4px; *margin:0 0 -5px -4px; padding: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE8*/
     filter:alpha(opacity=0);  /*IE5、IE5.5、IE6、IE7*/
     opacity: 0;  /*Opera9.0+、Firefox1.5+、Safari、Chrome*/}
--></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;}
img{border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
.br{ word-break: break-all; word-wrap: break-word;}	/*在IE中实行强制换行*/
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:underline; }

.selbox label{ margin: 10px; display: block; position: relative; background: url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/pcduron/EntryImages/20090812/checkbox.gif) 0 1px no-repeat; height: 14px; float: left; overflow: hidden; line-height: 14px;}
.labelbgup{  background: url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/pcduron/EntryImages/20090812/checkbox.gif) 0 -12px no-repeat!important; }
.selbox label input{margin-right: 4px; *margin:0 0 -5px -4px; padding: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE8*/
     filter:alpha(opacity=0);  /*IE5、IE5.5、IE6、IE7*/
     opacity: 0;  /*Opera9.0+、Firefox1.5+、Safari、Chrome*/}</style>
</head>
<body>
<div id="click" class="selbox">
<label><input type="checkbox" value="" />谷歌</label>
<label><input type="checkbox" value="" />不错</label>
<label><input type="checkbox" value="" />百度</label>
<label><input type="checkbox" value="" />郁闷</label>
</div>
<script type="text/javascript"><!--
var clickbox = document.getElementById("click");
var labels = clickbox.getElementsByTagName("label");
var inputs = clickbox.getElementsByTagName("input");
for(i = 0; i < inputs.length; i++)
{
	inputs[i].num = i;
	inputs[i].onclick = show;
}
function show()
{
		var x = labels[this.num].className;
		if(x)
		{
			labels[this.num].className = ""
		}
		if(!x)
		{
			labels[this.num].className = "labelbgup"
		}
}
// --></script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[练习]自定义checkbox效果 兼容ie ff opera

[练习]自定义checkbox效果兼容ie ff opera