Html5--利用lable+CSS3实现自定义checkbox

最新推荐文章于 2025-08-14 13:53:23 发布

原创最新推荐文章于 2025-08-14 13:53:23 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

Html5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML5和CSS3自定义复选框样式，包括利用label标签和`:after`伪元素实现美观且功能完整的复选框效果。

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

问题：

在用Html5做一个web APP的时候发现用浏览器自带的input checkbox不是很好看，就想着是否能做类似原生APP（Android&IOS的选择）

解决方法：

1. 在Html4阶段可能采用的方式就是切图展现，然后点击切换图片。

2. 在Html5中可以使用lable+CSS3样式直接自定义各种不同的checkbox。（注意：要浏览器支持Html5，因为我目前所做web app都是webkit内核，所以基本上都使用Html5新特性）

原理以及实现：

1. lable标签为input标签的标注，当lable标签的for属性和表单控件ID值相同时，点击lable标签就触发表单控件，这里就解决了触发问题了，如下写法，就相当于点击lable就点击input控件。

<input type="checkbox" checked="checked" id="jzmm"/>
<label for="jzmm" class="chebox-lable"></label>

2. CSS中提供了:after 选择器在被选元素的内容后面插入内容，请使用 content 属性来指定要插入的内容。

#jzmm {
	display:none;
}
#jzmm + .chebox-lable{
	display:inline-block;
	position: relative;
	padding:10px;
	border: 2px solid #0097d0;
	border-radius:2px;
	float:left;
}
#jzmm:checked + .chebox-lable:after{
	content: '\2714';
	color: #FF0000;
	font-size:20px;
	position:absolute;
	left:0px;
	top:0px;
}