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

<!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>

  

posted @ 2018-07-26 10:20  杰_森  阅读(763)  评论(0编辑  收藏  举报