二十六、css3改变checkbox复选框的样式

最新推荐文章于 2024-01-02 16:06:35 发布

weixin_34250434

最新推荐文章于 2024-01-02 16:06:35 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/deng-jie/p/9370126.html

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span {
				position: relative;
			}
			.input_check {
				position: absolute;
				visibility: hidden;
			}
			.input_check+label {
				display: inline-block;
				width: 16px;
				height: 16px;
				border: 1px solid #c00;
			}
			.input_check:checked+label:after {
				content: "";
				position: absolute;
				left: 2px;
				bottom: 12px;
				width: 9px;
				height: 4px;
				border: 2px solid #e92333;
				border-top-color: transparent;
				border-right-color: transparent;
				-ms-transform: rotate(-60deg);
				-moz-transform: rotate(-60deg);
				-webkit-transform: rotate(-60deg);
				transform: rotate(-45deg);
			}
		</style>
	</head>

	<body>
		<span><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span>
	</body>

</html>

转载于:https://www.cnblogs.com/deng-jie/p/9370126.html