样式优化分享：复选框_复选框样式怎么优化-CSDN博客

本文链接：https://blog.csdn.net/qq_68695044/article/details/133755365

让我们先来看一下复选框默认的样式

在编写网页的过程中，经常会遇到一些需要对input框的默认样式进行修改美化的场景，在这里向大家分享个人的一个范本

优化后

这里是通过了伪元素来在框中添加对号来达到这样的效果，下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		.tui-checkbox:checked {
			background: #ffffff;
		}
		.tui-checkbox {
			width: 30px;
			height: 30px;//宽高可自行调整
			background-color: #ffffff;
			border: solid 2px rgb(128, 128, 128);
			-webkit-border-radius: 50%;
			border-radius: 50%;
			font-size: 0.8rem;
			margin: auto;
			padding: 0;
			position: relative;
			display: inline-block;
			vertical-align: top;
			cursor: default;
			-webkit-appearance: none;
			-webkit-user-select: none;
			user-select: none;
			-webkit-transition: background-color ease 0.1s;
			transition: background-color ease 0.1s;
		}
		.tui-checkbox:checked::after {
			content: '';
			top: 25%;
			left: 25%;
			position: absolute;
			background: transparent;
			border: rgb(128, 128, 128) solid 3px;
			border-top: none;
			border-right: none;
			height: 6px;
			width: 10px;
			-moz-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
	</style>
	<body>
		<input type="checkbox" class="tui-checkbox"/>
	</body>
</html>

希望能为你带来一些帮助~