纯css改变checkbook样式

最新推荐文章于 2023-03-15 15:50:34 发布

小雨飞

最新推荐文章于 2023-03-15 15:50:34 发布

阅读量701

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css checkbox

本文链接：https://blog.youkuaiyun.com/qq19566/article/details/85244765

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用CSS对HTML中的checkbox进行自定义样式设置，包括改变方框形状、颜色及勾选状态显示，同时提供了隐藏原生checkbox的技巧。

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

    input[type="checkbox"] + label::before {
    	content: "\a0";              /*不换行空格*/
    	display: inline-block;
    	width: 13px;
    	height: 13px;
    	border-radius: .0em;         /*改变方框形状*/
    	background-color: white;
    	border: 1px solid black;
    	vertical-align: middle;
    	font-size: 18px;
    	line-height: 1; 
    	margin-bottom: 3px;
	}
     /*勾选状态*/
	input[type="checkbox"]:checked + label::before {
    	content: '\2713';           /*2713、2714都是勾，一个粗一个细*/
    	font-size: 12px;
    	text-align: center;
	}
    /*隐藏checkbox*/
	input[type="checkbox"] {
    	position: absolute;
    	clip: rect(0, 0, 0, 0);
	}