css美化checkbox样式,置灰样式，超简洁

最新推荐文章于 2025-04-07 20:12:06 发布

chiwen_wen

最新推荐文章于 2025-04-07 20:12:06 发布

阅读量7.8k

点赞数

本文链接：https://blog.youkuaiyun.com/chiwen_wen/article/details/90294704

版权

本文介绍了如何使用CSS美化checkbox，通过设置appearance: none和覆盖图片来实现简洁的置灰样式，提供了一段包含HTML和CSS的完整代码示例，鼓励开发者尝试自定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css美化checkbox样式

效果图

样式在这里插入图片描述样式可以自由定制，不用辛苦写一堆css

html

	<div>
		<input type="checkbox" class="toggle">
		<span>复选框1<span>
	</div>
	<div>
		<input type="checkbox" checked class="toggle">
		<span>复选框2<span>
	</div>
	<div>
		<input type="checkbox" disabled class="toggle">
		<span>复选框3<span> 
	</div>
	<div>
		<input type="checkbox" disabled checked class="toggle">
		<span>复选框4<span>
	</div>

css

.toggle{
    text-align: center;
    vertical-align: middle;
    border: none;
    appearance: none;/*关键代码*/
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
.toggle::after{
   content: url('../../../../assets/images/checkbox.png');
}

.toggle:checked::after{
    content: url('../../../../assets/images/checkbox1.png');
}
.toggle:disabled{
    content: url('../../../../assets/images/checkboxgray.png');
}
.toggle:checked:disabled{
    content: url('../../../../assets/images/checkbox1gray.png');
}

完整代码如下

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美化checkbox</title>
<style type="text/css">
	body {font-family: '微软雅黑'; background:#eee} 
	.box {width: 600px;border:1px solid #ccc; overflow: hidden; background: #fff; margin: 20px auto;padding: 10px;}

	.toggle{
		text-align: center;
		vertical-align: middle;
		border: none;
		appearance: none;/*关键代码*/
		-webkit-appearance: none;
		outline: none;
		cursor: pointer;
	}
	.toggle::after{
	content: url('./checkbox.png');
	}

	.toggle:checked::after{
		content: url('./checkbox1.png');
	}
	.toggle:disabled{
		content: url('./checkboxgray.png');
	}
	.toggle:checked:disabled{
		content: url('./checkbox1gray.png');
	}
</style>
</head>
<body>
	<div class="box">
		<div>
			<input type="checkbox" class="toggle"><span>复选框1<span>
		</div>
		<div>
			<input type="checkbox" checked class="toggle"><span>复选框2<span>
		</div>
		<div>
			<input type="checkbox" disabled class="toggle"><span>复选框3<span> 
		</div>
		<div>
			<input type="checkbox" disabled checked class="toggle"><span>复选框4<span>
		</div>
	</div>
	
</body>
</html>