CSS 用图片替换checkbox样式

最新推荐文章于 2023-08-01 11:07:16 发布

homandjing

最新推荐文章于 2023-08-01 11:07:16 发布

阅读量916

点赞数

分类专栏： Web 文章标签： checkbox css

本文链接：https://blog.youkuaiyun.com/homandjing/article/details/83983235

版权

Web 专栏收录该内容

6 篇文章

订阅专栏

<html>
<head>
<style type="text/css">
a,label {
	display:block;
	width:25px;
	height:25px;
	overflow:hidden
	}
a {
	background:url("xxx.gif") no-repeat
	}
a:hover {
	background:url("yyy.gif") no-repeat
	}
a#b,a#d {
	background:url("zzz.gif") no-repeat
	}
</style>
</head>
<body>

<label for="la1">
	<a href="#b" id="a" οnclick="la1.checked=true"></a>
	<a href="#a" id="b" οnclick="la1.checked=false"></a>
	<input type="checkbox" id="la1" />
</label>
<label for="la2">
	<a href="#d" id="c" οnclick="la2.checked=true"></a>
	<a href="#c" id="d" οnclick="la2.checked=false"></a>
	<input type="checkbox" id="la2" />
</label>
</body>
</html>