自定义checkbox样式

最新推荐文章于 2024-08-08 19:00:48 发布

sluck1988

最新推荐文章于 2024-08-08 19:00:48 发布

阅读量593

点赞数

分类专栏：开发手记 javascript 文章标签： input class webkit function url css

本文链接：https://blog.csdn.net/sluck1988/article/details/7687520

版权

开发手记同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

在webkit下，若用CSS控制checkbox大小，只会改变其padding值，一个通用的方法是用JS+CSS+DIV模拟

实现思路：做两张图——一张选中的，一张没选的，加个隐藏的input，通过onclick事件来改变input值和图片

下面贴出示例代码，以抛砖引玉

代码及图片下载：http://download.csdn.net/detail/sluck1988/4389745

<style>
.chkbox_unchecked{
	width:38px;
	height:38px;
	background:url(chkbox.png) 0 0 no-repeat;
	float:left;
}
.chkbox_checked{
	width:38px;
	height:38px;
	background:url(chkbox.png) -38px 0 no-repeat;
	float:left;
}
.chkboxNote{
	line-height:40px;
	font-size:24px;
};
</style>

<body>
	<form name="myform">
        <div class="chkbox_unchecked" id="chkbox1"></div><span class="chkboxNote">我已注册CSDN</span>
        <input type="hidden" name="chkReg" value="false" />
    </form>
</body>

<script language="javascript">
	var clickObj = document.getElementById("chkbox1");
	var chkObj = document.forms.myform.chkReg;
	clickObj.onclick = function(){
		chkObj.value = (chkObj.value == "true")?"false":"true";
		if(chkObj.value == "true"){
			document.getElementById("chkbox1").className = "chkbox_checked";
		}else{
			document.getElementById("chkbox1").className = "chkbox_unchecked";
		}
	}
</script>