更改checkbox原始样式，写出自己喜欢的样式

最新推荐文章于 2025-06-17 06:15:00 发布

原创最新推荐文章于 2025-06-17 06:15:00 发布 · 1.6w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox

css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了三种使用CSS3技术定制复选框样式的方案，包括利用背景图片、添加伪元素及SVG图标替换默认样式的方法。

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

现在的在做项目的时候，ui经常会设计出特有的样式的，这里使用的方式都是CSS3的伪类方式解决的

1.第一方法：就是用背景图的方式当做checked的时候的样式的

body：：：

<h3>利用background用图片代替checkbox效果</h3>
<div id="container">
<span><input type="checkbox"class="inputCheck" id="checkbox1"><label for="checkbox1"></label></span>
<span><input type="checkbox"class="inputCheck" id="checkbox2"><label for="checkbox2"></label></span>
</div>

解释：这里使用的方式的span包裹的input和label的标签，这里要注意的一点就是 input中的id名字要和label的名字要一样，不然效果是不会出来的。

css：

#container {height:150px;width:150px;}
#container span {position: relative;}
#container .inputCheck {position: absolute;width: 20px;height: 20px;		
						visibility: hidden;}
#container .inputCheck+label {display: inline-block;width: 20px;height: 20px;
							background: red;}
#container .inputCheck:checked+label {background: url(checkbox.png) no-repeat center center;background-size:20px 20px;}

解释：这里最重要的一点就是，把checkbox的原始样式取消，用新的样式来代替的，


visibility: hidden; 就是取消样式的。其他的css代码不做多解释的，那个复选框最初的样式是红色的，然后checked的样式checkbox.png的图片的。图片展示：见1.png
第二种方式：
css代码：
<style>
 span {position: relative;}
 .inputCheck {position: absolute;visibility: hidden;}
 .inputCheck+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}

 .inputCheck:checked+label:after {content: "";position: absolute;left: 3px;bottom: 10px;width: 9px;height: 4px;border: 2px solid black;
	border-top-color: transparent;border-right-color: transparent;
	-webkit-transform: rotate(-60deg);transform: rotate(-45deg);} 
</style>

这种方式我是添加一个content的内容，通过定位的方式来调整，然后通过旋转的方式来倾斜，在吧一个拐角的2个边透明，另外2个边加上颜色，这样效果就出来的

图片展示：2.png

第三种方式代码和方法一是一样的

css在checked时候的代码要修改一下的

background: url('/images/common/icon.svg') no-repeat center center #ff7a4f;

这里我使用svg的图片的，在后面加个颜色效果就出来的
图片展示：3.png