CSS3关于伪类效果修改CheckBox默认样式

最新推荐文章于 2024-05-21 15:46:26 发布

.olofmeister

最新推荐文章于 2024-05-21 15:46:26 发布

阅读量400

点赞数 1

文章标签： css3 checkbox 伪对象选择器

本文链接：https://blog.csdn.net/weixin_44593658/article/details/103689209

版权

我们在使用input中的CheckBox时总会觉得默认的样式很丑可是它本身能修改的样式又甚少，今天给大家介绍几个例子关于修改他的样式

首先我们需要知道的是我们是无法修改它本身的样式但是有两种常用的方法实现同样的功能

通过两张或多张图片来覆盖CheckBox点击切换不同的图片来实现这个方法兼容性比较好但是需要额外引入图片增大加载量
通过lable标签来实现与CheckBox联动，我们修改lable的样式来实现这个方法由于用到很多CSS3的方法所以兼容性差但是不需要引入额外的图片

今天给大家介绍第二种方法先上代码

	<div class="check1">
		<input type="checkbox" value="1" name="" id="type1">
		<label for="type1" class="la1"></label>
	</div>

下面的例子HTML结构都是一样的只是换了一个ID 所以只放一个

		.check1{
   
			width: 30px;
			position: relative;
		}
		.la1{
   
			cursor: pointer

关注