css修改input的 checkbox 选中样式

最新推荐文章于 2024-07-30 16:26:17 发布

thisReally

最新推荐文章于 2024-07-30 16:26:17 发布

阅读量5.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_43900862/article/details/85236180

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何通过CSS来改变input[type='checkbox']的选中样式，实现自定义的视觉效果。通过设置不同的伪类如:checked，可以控制checkbox在不同状态下的样式。

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

实现的效果：

在这里插入图片描述

代码如下：

//可以使用 lable 标签的for属性，绑定到input标签上（for属性应对应到input标签中的id）
//这是题外话，我这边没有这一项操作。
<div class="check">
  <label class="label">
    <span class="span"></span>
    <input class="input" type="checkbox" />我是选项1
  </label>
  <label class="label">
    <span class="span"></span>
    <input class="input" type="checkbox" />我是选项2
  </label>
</div>

css样式设置：

.label{
	display: block;
	padding: 5px 0;
}
.input{
	outline: none;
	appearance:none;/*改变任何元素的浏览器默认风格*/	
	-webkit-appearance: none;
}
.span{
	background: url(img/chos@2x.png) no-repeat 0/100% 100%;
	height: 15px;
	width: 15px;
	display: inline-block;
	border-radius: 50%;
}